Avatar
Displays a user's image, initials, or icon to represent their identity in lists, headers, or profile contexts.
TMAB
Code
Installation
Avatar component:
npx shadcn@latest add avatarAvatar Group component:
npx shadcn@latest add avatar-groupBasic Example
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
<Avatar>
<AvatarImage src="/images/user.png" alt="User" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>Avatar Group
import { AvatarGroup } from "@/components/ui/avatar-group"
const users = [
{ id: "1", name: "Tom", avatar: "/image.png", initials: "TM" },
{ id: "2", name: "Jane", initials: "JS" }
]
<AvatarGroup users={users} />Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image source URL (AvatarImage) |
| alt | string | — | Alt text for image (AvatarImage) |
| users | User[] | [] | Array of user objects (AvatarGroup) |
| size | string | "md" | Size of avatars. Options: sm, md, lg (AvatarGroup) |
Sizes
SML
Avatar Group
TM
JS
MJ
With Add Button
TM
JS
MJ
Usage Guidelines
When to Use
Use avatars to represent users, team members, or entities. They provide a visual identifier and make interfaces more personal and recognizable.
Avatar groups are ideal for showing team members, collaborators, or participants in a shared space. Use them in headers, comments, or member lists.
Best Practices
- Always provide fallback initials when images are unavailable
- Use consistent sizing within a context
- Ensure avatars are recognizable at their display size
- For avatar groups, limit visible avatars and show overflow count
- Use appropriate sizes: small for lists, medium for headers, large for profiles
Accessibility
Always provide alt text for avatar images to ensure screen readers can identify the user. Fallback initials should be meaningful and represent the user's name.
When using avatar groups, ensure users can access information about all members, not just those visible in the overflow indicator.