Avatar Group
An overlapping stack of avatars with a trailing +N count and a name-on-hover tooltip — the Untitled UI 'who's on this' pattern. Data-driven: pass an avatars array and an optional max; anything past max folds into the count chip.
$
Registry itembunx shadcn@latest add @nx-ui/avatar-groupOverlapping stack
Avatars overlap and punch out of one another with a ring. Hover any one to reveal the person's name.
AOMBPNTFSLLMNR
With overflow count
Cap the group with max — the remaining avatars collapse into a +N chip that keeps the row compact.
AOMBPNTF
+3
Sizes
Three sizes — sm, default and lg — matching the avatar primitive. The count chip scales with the group.
AOMBPNTF
+3
AOMBPNTF
+3
AOMBPNTF
+3
Fallback initials
Avatars without an image fall back to initials derived from the name — no broken image, no blank circle.
NROBKMAO
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
avatars* | AvatarGroupItem[] | — | — |
max | number | — | Maximum avatars to show before collapsing the rest into a `+N` chip. |
size | AvatarSize | "default" | — |
…extends React.ComponentProps<"div">