Components
Avatar cluster
One 40px mark standing for a whole group.
RAMPProcurement5 membersAvatarGroup, for comparisonROANMAPR+1
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/avatar-cluster.jsonCluster or group
An AvatarGroup is a row of people you read one by one. A cluster is a single mark standing for the group as a whole, in the 40px footprint where one avatar would otherwise go.
Use a cluster in a list row where the group is the subject — a team, a channel, a shared folder. Use a group where the individuals matter.
It caps at four and names the remainder in its aria-label, so a screen reader
gets "and 3 more" rather than four disconnected initials.
| Prop | Type | Default | Description |
|---|---|---|---|
| people | string[] | — | First initial of each. Renders the first four. |