Components
Avatar
A user image with fallback and optional status badge.
Avatar is built on the Base UI Avatar primitive. It shows an image when available and falls back to initials or placeholder content while loading or on error.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/avatar.jsonUsage
SX
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
export default function Example() {
return (
<Avatar>
<AvatarImage src="https://github.com/SujalXplores.png" alt="SujalXplores" />
<AvatarFallback>SX</AvatarFallback>
</Avatar>
);
}Examples
Sizes
SML
<Avatar size="sm">
<AvatarFallback>S</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>M</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarFallback>L</AvatarFallback>
</Avatar>With a status badge
AB
<Avatar>
<AvatarFallback>AB</AvatarFallback>
<AvatarBadge />
</Avatar>Avatar group
Stack multiple avatars with AvatarGroup:
ABC
<AvatarGroup>
<Avatar>
<AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>B</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>C</AvatarFallback>
</Avatar>
</AvatarGroup>API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Avatardata-slot="avatar" | Avatar.RootBase UI |
|
AvatarImagedata-slot="avatar-image" | Avatar.ImageBase UI | — |
AvatarFallbackdata-slot="avatar-fallback" | Avatar.FallbackBase UI | — |
AvatarBadgedata-slot="avatar-badge" | <span>HTML | — |
AvatarGroupdata-slot="avatar-group" | <div>HTML | — |
AvatarGroupCountdata-slot="avatar-group-count" | <div>HTML | — |
Last updated on