Overlapping avatars with a +N tail. Hovering spreads them apart and shows a name tooltip.
Fernhill Plant Club
Grown by neighbours
npx shadcn@latest add https://hyperblur.dev/r/avatar-stack.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/avatar-stack.tsx.
import { AvatarStack } from "@/components/hyperblur/avatar-stack"
<AvatarStack people={[{ name: "Ada Lovelace" }, { name: "Alan Turing" }]} extra={12} />| Prop | Type | Default | Description |
|---|---|---|---|
| people | { name: string; image?: string; color?: string }[] | [] | People to show. Without an image the initials render on a color derived from the name, or on `color` when given. |
| size | number | 40 | Avatar diameter in pixels. |
| max | number | 5 | Most avatars to show. Anyone beyond it moves into the +N tail. |
| ring | string | "#111111" | Color of the ring around each avatar. Match it to the surface behind the stack. |
| extra | number | 0 | People you know about but did not list. Added to the +N tail. |