Avatar
Avatar Component
User avatar with image support, fallback initials, multiple sizes, and optional status indicator dot.
Import
import { Avatar } from '@covers/ui';Usage
import {
Avatar,
AvatarImage,
AvatarFallback,
} from '@covers/ui';
// With image
<Avatar>
<AvatarImage src="/avatars/johndoe.jpg" alt="John Doe" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
// Fallback only (no image or image fails to load)
<Avatar>
<AvatarImage src="/broken-link.jpg" alt="Jane Smith" />
<AvatarFallback>JS</AvatarFallback>
</Avatar>
// Sizes
<Avatar className="h-8 w-8">
<AvatarImage src="/avatars/sm.jpg" alt="Small" />
<AvatarFallback className="text-xs">SM</AvatarFallback>
</Avatar>
<Avatar className="h-12 w-12">
<AvatarImage src="/avatars/md.jpg" alt="Medium" />
<AvatarFallback>MD</AvatarFallback>
</Avatar>
<Avatar className="h-16 w-16">
<AvatarImage src="/avatars/lg.jpg" alt="Large" />
<AvatarFallback className="text-lg">LG</AvatarFallback>
</Avatar>
// With status dot
<div className="relative inline-block">
<Avatar>
<AvatarImage src="/avatars/user.jpg" alt="User" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
<span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-slate-900" />
</div>Props
| Name | Type | Description |
|---|---|---|
| src | string | Image URL (passed to AvatarImage) |
| alt | string | Alt text for the avatar image |
| fallback | string | Initials or text shown when image is unavailable |
| size | "sm" | "default" | "lg" | Avatar size via className (h-8, h-10, h-16) |
Default Styling
h-10 w-10 rounded-full bg-slate-700 text-slate-200 flex items-center justify-center
Part of CoverKit
This component is part of CoverKit (@covers/ui), a dark-first React component library.