All components

Avatar

User or entity image with fallback.

Full API on ui.shadcn.com

With fallback

JD
<Avatar>
  <AvatarImage src="/broken-image.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

With country flag

SE participant and staff surfaces show the person's country of origin as a flag in the bottom-right corner. Combines stock AvatarBadge with CountryFlag.

JDACPP
<Avatar>
  <AvatarImage src="/jane.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
  <AvatarBadge className="overflow-hidden">
    <CountryFlag code="gb" shape="circle" className="h-full w-full" />
  </AvatarBadge>
</Avatar>

With status dot

AvatarBadge can hold any small indicator. A coloured dot for presence works the same way.

JD
<Avatar>
  <AvatarImage src="/jane.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
  <AvatarBadge className="bg-success" />
</Avatar>

Sizes

Three stock sizes via the size prop.

JDJDJD
<Avatar size="sm"><AvatarFallback>JD</AvatarFallback></Avatar>
<Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>JD</AvatarFallback></Avatar>

Group

Stacked avatars with an overflow count.

JDACPP
+5
<AvatarGroup>
  <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>AC</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>PP</AvatarFallback></Avatar>
  <AvatarGroupCount>+5</AvatarGroupCount>
</AvatarGroup>

Group with flags

Each avatar can keep its country badge inside a group.

JDACPP
+3
<AvatarGroup>
  <Avatar>
    <AvatarFallback>JD</AvatarFallback>
    <AvatarBadge className="overflow-hidden">
      <CountryFlag code="gb" shape="circle" className="h-full w-full" />
    </AvatarBadge>
  </Avatar>
  <Avatar>
    <AvatarFallback>AC</AvatarFallback>
    <AvatarBadge className="overflow-hidden">
      <CountryFlag code="us" shape="circle" className="h-full w-full" />
    </AvatarBadge>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>