Avatar Group
Overlapping avatar stack with deterministic name-hashed colors, +N overflow chip, sizes and presence status dots.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
AvatarProps
Also accepts all props of React.ComponentProps<"span">
| Prop | Type | Default | Description |
|---|---|---|---|
| name* required | string | — | — |
| size | AvatarSize | "md" | — |
| status | AvatarStatus | — | — |
AvatarGroupProps
Also accepts all props of React.ComponentProps<"div">
| Prop | Type | Default | Description |
|---|---|---|---|
| users* required | AvatarUser[] | — | — |
| max | number | 4 | Maximum avatars shown before collapsing into a "+N" chip |
| size | AvatarSize | "md" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/avatar-group.json