<Avatar>
<AvatarImage src="https://github.com/mehdibha.png" alt="@mehdibha" />
<AvatarFallback>M</AvatarFallback>
</Avatar>npx shadcn@latest add @dotui/avatarUse 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>Use the controls below to experiment with different avatar props and see the live preview and code update.
The size of the avatar.
"sm" | "md" | "lg"<Avatar size="md">
<AvatarImage src="https://github.com/mehdibha.png" alt="@mehdibha" />
<AvatarFallback>MB</AvatarFallback>
</Avatar>A visual representation of a user or entity, displayed as an image, initials, or placeholder.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
"sm" | "md" | "lg" | 'md' |
The image element displayed within the avatar. Automatically hidden when the image fails to load.
Supports all img attributes.
| Prop | Type | Default | |
|---|---|---|---|
string | — |
Content displayed when the avatar image fails to load. Typically shows initials or an icon.
Supports all span attributes.
A small indicator displayed on the avatar, typically used to show online status.
Supports all span attributes.
A group container that displays multiple avatars together with overlapping layout.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
"sm" | "md" | "lg" | 'md' |
A count indicator displayed at the end of an avatar group to show remaining items.
Supports all span attributes.
Last updated on 3/11/2026
Bringing singularity to the web.
Built with passion by @mehdibha.