On this page
<Avatar>
<AvatarImage alt="@mehdibha" />
<AvatarFallback>MB</AvatarFallback>
</Avatar>Installation
npx shadcn@latest add @dotui/avatarUsage
Use avatars to represent users or entities with an image or initials.
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'<Avatar>
<AvatarImage src="https://github.com/mehdibha.png" alt="@mehdibha" />
<AvatarFallback>MB</AvatarFallback>
</Avatar>Examples
Basic
Fallback-only
Sizes
Radii
Badge
Badge with icon
Status badge
Badge with notification
Icon fallback
Group
Group with count
API Reference
Avatar
A visual representation of a user or entity, displayed as an image, initials, or placeholder.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
"lg" | "md" | "sm" | 'md' | ||
AvatarImage
The image element displayed within the avatar. Automatically hidden when the image fails to load.
Supports all img attributes.
| Prop | Type | Default | |
|---|---|---|---|
string | — | ||
AvatarFallback
Content displayed when the avatar image fails to load. Typically shows initials or an icon.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
AvatarBadge
A small indicator displayed on the avatar, typically used to show online status.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
AvatarGroup
A group container that displays multiple avatars together with overlapping layout.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
"lg" | "md" | "sm" | 'md' | ||
AvatarGroupCount
A count indicator displayed at the end of an avatar group to show remaining items.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
Last updated on 6/16/2026