Avatar
A person's picture with an initials fallback, plus grouping and status-badge helpers.
TNTNJT
RMTNJTRM
+4
Install
pnpm dlx shadcn@latest add @namche/avatarUsage
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
<Avatar>
<AvatarImage src="/team/tenzing.jpg" alt="Tenzing Norgay" />
<AvatarFallback>TN</AvatarFallback>
</Avatar>size is default | sm | lg. AvatarImage renders once it loads and falls
back to AvatarFallback otherwise, so always pair the two. AvatarBadge
overlays a small status indicator in the corner, and AvatarGroup with
AvatarGroupCount stacks a set of avatars with a trailing +N count for
overflow.