The AvatarStack component overlaps a row of avatars into a single group, collapses everyone past a limit into a +N chip, and lifts an avatar clear of its neighbours on hover without the row changing width.
For social proof beside a headline, the members of a shared document, or the assignees on a task: any short list of people where the group matters more than the individuals. It reads as a group up to about eight faces; past that the overlap hides too much of each one and a plain list serves better. Give every entry a real name even when you pass an image: the name is what a screen reader announces, and the initials fallback is built from it.
Add it with the CLI, open it in v0, or copy the source into your project.
Everything Avatar Stack accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| avatars (required) | AvatarStackItem[] | No default | The people to show, in display order |
| AvatarStackItem: name | string | No default | Full name. Used as the image's alt text and as the source of the initials fallback |
| AvatarStackItem: src | string | No default | Optional image URL. An entry without one renders its initials instead |
| max | number | 5 | How many avatars to show before the rest collapse into a +N chip |
| size | number | 40 | Diameter of one avatar, in pixels |
| overlap | number | 12 | How far each avatar sits over the one before it, in pixels |
| ring | boolean | true | Draw a ring in the page background colour, to separate the discs |
| className | string | '' | Additional CSS classes for styling |
Required.
Joined by 2,400 teams this month