Components
Avatar
A visual identifier for a user or team: image with initials fallback.
Image
<Avatar>
<AvatarImage src="https://github.com/buenagames.png" alt="Buena Labs" />
<AvatarFallback>BL</AvatarFallback>
</Avatar>Fallback
Sizes
BLBLBL
<Avatar size="sm">…</Avatar>
<Avatar>…</Avatar> {/* default */}
<Avatar size="lg">…</Avatar>Badge
BLEM
<Avatar size="lg">
<AvatarImage src="…" alt="…" />
<AvatarFallback>BL</AvatarFallback>
<AvatarBadge className="bg-success" />
</Avatar>
<Avatar size="lg">
<AvatarFallback>EM</AvatarFallback>
<AvatarBadge><CheckIcon /></AvatarBadge>
</Avatar>Icon, git & placeholder
BG
Left: a custom icon inside the fallback. Middle: a git-platform avatar (image sourced from github.com/<user>.png). Right: a placeholder loading shell — reserve it for loading, never as a permanent fallback.
Group
BLEMJR
+3
AvatarGroup uses a fixed overlap (-space-x-2); tighten or loosen it with the spacing utility. The first member sits on top by default — reverse the stacking order by reversing the DOM order. Compose an Avatar as a menu trigger for the dropdown pattern.
Group with icon
BLEM
Markdown for agents: /design/avatar.md · spec: /design.md