Data Display
Avatar Group
A row of overlapping avatars with an optional +N overflow chip.
A row of overlapping Avatars with an optional overflow count — for showing who is on a team, in a thread, or on a call.
Import
tsx
1import { AvatarGroup, Avatar, AvatarImage, AvatarFallback } from "@yuhuanowo/yunui";Usage
Pass Avatar children; the group overlaps them and gives each a separating ring. Set max to cap how many are drawn — the remainder collapses into a +N chip at the end. Without max, every child is shown.
Avatar group
AL
YH
GH
AL
GH
AT
+2
Notes
The separating ring is an inline box-shadow, not a ring-*/border-* utility. That is deliberate: it renders in any consumer without depending on those classes being generated by that app's Tailwind scan, and it does not change the avatar's box size, so the -space-x-2 overlap stays exact.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| max | number | — | Cap how many avatars render; the remainder collapse into a "+N" chip. |