Avatar

An image element with a fallback for representing the user.

Avatar

STU

STU

STU

STU

Stacked Avatars

STSTST

STSTST

STSTST

STSTST

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
} from "@/components/ui/avatar"

{/* Single avatar */}
<Avatar size="md">
  <AvatarImage src="/img/stx-logo.png" alt="STX" />
  <AvatarFallback>ST</AvatarFallback>
</Avatar>

{/* Stacked avatars */}
<AvatarGroup size="md">
  <Avatar>
    <AvatarImage src="/img/stx-logo.png" alt="STX" />
    <AvatarFallback>ST</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/img/stx-logo.png" alt="STX" />
    <AvatarFallback>ST</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/img/stx-logo.png" alt="STX" />
    <AvatarFallback>ST</AvatarFallback>
  </Avatar>
</AvatarGroup>

Sizes

Size	Class	Dimensions
xs	size-6	24×24px
sm	size-8	32×32px
md	size-12	48×48px
lg	size-20	80×80px

API Reference

Avatar

Prop	Type	Default	Description
size	"xs" | "sm" | "md" | "lg"	"md"	Controls the avatar dimensions

AvatarGroup

Prop	Type	Default	Description
size	"xs" | "sm" | "md" | "lg"	"md"	Controls the size of all child avatars and their overlap spacing

Accessibility

• Uses Radix UI's Avatar primitive with proper image loading states
• AvatarFallback renders when the image fails to load or while loading
• Always provide an alt attribute on AvatarImage for screen readers
• Fallback text should be initials or a meaningful abbreviation