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.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/avatar-stack.jsonEverything 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