Components
Avatar stack
Overlapping avatars fused into one drop of liquid. Hover or focus the group and they part — the necks thin and snap — and each face lifts with its name.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { AvatarStack } from '@vizzele/react';
<AvatarStack
max={5}
people={[
{ name: 'Ada Lovelace', src: '/ada.jpg' },
{ name: 'Alan Turing' }, // initials on a gradient
{ name: 'Grace Hopper' },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
people | { name, src? }[] | — | Without src, initials on a gradient. |
max | number | 5 | Shown before "+N". |
size | number | 44 | Diameter (px). |
Accessibility
- One focusable group named with the count and every name ("7 people: Ada, Alan…"), so the list is read once, not face by face.
- Focus parts the stack just like hover.