Avatar Stack
Free
Overlapping avatars that fan out with names on hover, plus a bubble for the rest.
Thursday · 10:30
Design review
Onboarding flow, round two. Hover the faces to see who is coming.
Customize
7
4
40px
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/avatar-stack.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/avatar-stack.tsx.
Usage
import { AvatarStack } from "@/components/ui/avatar-stack";
<AvatarStack
people={[{ name: "Mia Torres" }, { name: "Kenji Ward" }, { name: "Ava Lindqvist" }]}
max={4}
size={40}
/>Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| people | { name, color? }[] | — | People in order. Without a color, one is picked from the name. |
| max | number | 4 | Avatars shown before the +N bubble. |
| size | number | 40 | Avatar diameter in pixels. |
| ringColor | string | "#070606" | Ring between overlapping avatars. Match it to the surface behind. |
| className | string | — | Extra classes for the group. |
Dependencies: motion