Avatar group

Overlapping Avatars for a team or a set of collaborators. This one is a Bones composition (Base UI has no such part): a layout around Avatars, with anything past max collapsing into a +N chip.

Playground

Pick a Max to watch the tail of the team fold into a +N chip, and flip Compact to shrink the chip and every avatar together. The Code tab shows the markup for exactly what you've configured.

Variants

Everyone fits, or the tail collapses, in both sizes. Order children most-important first; the chip always sits last, and the pictured member gets a real alt because no name is visible beside the stack.

Styling states

No interactive states; the hooks are the group, the +N chip (which also carries .ub-avatar and data-size), and the ring variable for groups that sit on a surface instead of the page background:

.ub-avatar-group-overflow {
  background: var(--ub-accent);
  color: var(--ub-accent-contrast);
}

.card .ub-avatar-group {
  --ub-avatar-group-ring: var(--ub-surface);
}

Props

Everything a div accepts passes through. The avatars inside are regular Bones Avatars and keep their own props; match their size to the group's. The essentials:

Agent instructions

Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.

AvatarGroup, from @usebones/react.
- Put Bones Avatars inside, one per person with alt set to their name; order most-important first. max={n} collapses the rest into a +N chip; size sizes the chip (match the Avatars' size).
- A composition, not a Base UI wrapper: it is a div, so every div prop passes through.
- Each avatar gets a ring in the page background so the stack reads cleanly; override --ub-avatar-group-ring when the group sits on a card or other surface.
- Restyle in CSS via .ub-avatar-group and .ub-avatar-group-overflow. Tokens only.