User profile picture with fallback support.
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | default | Avatar size |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Fallback Background | color.muted | var(--muted) | Fallback background | |
| Fallback Text | color.muted-foreground | var(--muted-foreground) | Fallback text |
Avatar with profile image and fallback initials.
<Avatar> <AvatarImage src="https://..." alt="User avatar" /> <AvatarFallback>JD</AvatarFallback> </Avatar>
Shows initials when image is not available.
<Avatar> <AvatarFallback>JD</AvatarFallback> </Avatar>
Available size variants for different contexts.
Small
Default
Large
XL
<Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar> <Avatar size="default"><AvatarFallback>MD</AvatarFallback></Avatar> <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar> <Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>
Stack avatars with negative spacing for compact display.
<div className="flex -space-x-3">
<Avatar className="ring-2 ring-background">
<AvatarImage src="..." alt="User 1" />
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarFallback>+3</AvatarFallback>
</Avatar>
</div>Add a status dot to show online/offline state.
<div className="relative">
<Avatar>
<AvatarFallback>JD</AvatarFallback>
</Avatar>
<span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring-2 ring-background" />
</div>