Avatar

shadcn/ui

User identity indicator. Shows an image with initials as fallback. Two sub-components: AvatarImage, AvatarFallback.

@/components/ui/avatar

Sizes

AS6 (24px)

AS8 (32px)

AS10 (40px)

AS12 (48px)

AS16 (64px)

Size is controlled via className — there is no size prop. Most common: h-6 w-6 (toolbar), h-8 w-8 (table rows)

Image vs fallback

SCWith image

ASFallback (broken src)

ASInitials only

Avatar group

ASBJCWDB

Stacked group: -space-x-2 + border-2 border-card on each avatar

In context

On this page