Avatar Group

Stacked avatar components showing multiple users with overflow indicator.

Default

Overlapping avatars with an overflow counter.

html
User 1
User 2
User 3
User 4
+3 
<div class="uc-flex uc--space-x-3">
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-overflow-hidden uc-ring-2 uc-ring-neutrals-background">
    <img src="..." alt="User" />
  </div>
  <!-- ...more avatars -->
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-ring-2 uc-ring-neutrals-background">
    <span class="uc-text-xs">+3</span>
  </div>
</div>

Sizes

Avatar groups in small, default, and large sizes.

html
Small
User 1
User 2
User 3
+2
Default
User 1
User 2
User 3
+2
Large
User 1
User 2
User 3
+2 
<!-- Small (32px) -->
<div class="uc-flex uc--space-x-2">
  <div class="uc-w-8 uc-h-8 uc-rounded-full ... uc-ring-2 uc-ring-neutrals-background">...</div>
</div>

<!-- Default (40px) -->
<div class="uc-flex uc--space-x-3">
  <div class="uc-w-10 uc-h-10 uc-rounded-full ... uc-ring-2 uc-ring-neutrals-background">...</div>
</div>

<!-- Large (48px) -->
<div class="uc-flex uc--space-x-4">
  <div class="uc-w-12 uc-h-12 uc-rounded-full ... uc-ring-2 uc-ring-neutrals-background">...</div>
</div>

With Initials

Avatar group mixing images and initial-based avatars with distinct colors.

html
User 1
AJ
User 2
SC
ML
+4 
<div class="uc-flex uc--space-x-3">
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-overflow-hidden uc-ring-2 uc-ring-neutrals-background">
    <img src="..." alt="User" />
  </div>
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-accents-blue uc-ring-2 uc-ring-neutrals-background">
    <span class="uc-text-sm uc-font-medium uc-text-constant-white">AJ</span>
  </div>
  <!-- ...more -->
</div>

With Status

Avatars with online and offline status indicators.

html
User 1
User 2
User 3
User 4
User 5
+3 
<div class="uc-flex uc--space-x-3">
  <div class="uc-relative uc-inline-flex">
    <div class="uc-w-10 uc-h-10 uc-rounded-full ... uc-ring-2 uc-ring-neutrals-background">
      <img src="..." />
    </div>
    <span class="uc-absolute uc-bottom-0 uc-right-0 uc-w-3 uc-h-3 uc-rounded-full uc-bg-accents-blue uc-ring-2 uc-ring-neutrals-background"></span>
  </div>
</div>

With Tooltip Labels

Hover over each avatar to see the user name.

html
Alice Johnson
Alice Johnson
Bob Smith
Bob Smith
Carol Davis
Carol Davis
David Lee
David Lee
+5
5 more users 
<div class="uc-flex uc--space-x-3">
  <div class="uc-relative uc-group/avatar uc-hover:z-10">
    <div class="uc-w-10 uc-h-10 uc-rounded-full ... uc-ring-2 uc-ring-neutrals-background uc-group-hover/avatar:scale-110">
      <img src="..." />
    </div>
    <div class="uc-absolute uc-bottom-full ... uc-opacity-0 uc-group-hover/avatar:opacity-100">
      Alice Johnson
    </div>
  </div>
</div>

Compact Stack

Tightly overlapping avatars with a large overflow counter.

html
User 1
User 2
User 3
User 4
User 5
User 6
+12 
<div class="uc-flex uc--space-x-4">
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-overflow-hidden uc-ring-2 uc-ring-neutrals-background">
    <img src="..." />
  </div>
  <!-- ...6 avatars -->
  <div class="uc-w-10 uc-h-10 uc-rounded-full uc-bg-neutrals-muted uc-ring-2 uc-ring-neutrals-background">
    <span class="uc-text-xs uc-font-medium">+12</span>
  </div>
</div>

API Reference

All CSS classes available for the Avatar Group component.

Class Type Description
uc-flex uc--space-x-3 Base Overlapping layout for default-size avatars
uc-flex uc--space-x-2 Size Tighter overlap for small avatars
uc-flex uc--space-x-4 Size Wider overlap for large or compact avatars
uc-ring-2 uc-ring-neutrals-background Base White ring to visually separate overlapping avatars
uc-z-0 uc-hover:z-10 Modifier Brings hovered avatar to front (tooltip variant)

Accessibility

Keyboard and screen reader support.

Feature Details
Group label Wrap in a container with aria-label describing the group, e.g. "Team members"
Overflow The "+N" counter should have aria-label="N more users" for screen readers
Tooltips Name tooltips should use role="tooltip" with aria-describedby on the avatar
Images Each avatar image needs unique alt text with the user name