Browse components
Avatar Group
Overlapping avatar stack that fans apart on hover, with name tooltips and a +N overflow chip.
Installation
npx shadcn@latest add @glint-ui/avatar-groupFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/avatar-group.json
Usage
import { AvatarGroup } from "@/components/ui/avatar-group";
<AvatarGroup max={4} people={[{ name: "Maya Chen", src: "/maya.jpg" }, { name: "Jonas Weber" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| people | ReactNode | — | Array of { name, src? }. |
| max | number | 4 | Avatars shown before the +N chip. |
| size | number | 44 | Avatar diameter in px. |
| overlap | number | 14 | Px each avatar tucks under the previous one. |
| spread | boolean | true | Fan apart on hover or keyboard focus. |
| className | string | — | Extra classes for the root element. |