## Avatar Stack (S—027)

Overlapping avatars that fan apart on hover, with presence dots, tooltips and a +N overflow list.

- URL: https://sundaeui.dev/components/avatar-stack
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/avatar-stack.json`
- Tags: tailwind, presence, avatar, avatar-group, react, tooltip

Shows who is here without taking much room. Avatars overlap with a ring that separates them on any background. Hover the group and they ease apart, so each face and its tooltip are easy to target. Presence dots show online, away or offline.
Without an image, a person gets initials on a colour derived from their name, so it is stable between renders and sessions. Broken image URLs fall back to initials too. Past max, a +N button opens a list of everyone else.
Use it for collaborators, assignees and team previews.

### Usage

```tsx
import { AvatarStack } from '@/components/sundae/avatar-stack'

<AvatarStack max={4} people={[{ id: '1', name: 'Ines Duarte', src: '/ines.jpg', status: 'online', role: 'Design' }]} />
```

### Props

- `people` (`Person[]`, required): { id, name, src?, status?, role? }.
- `max` (`number`, default `4`): Visible avatars before overflow.
- `size` (`number`, default `36`): Diameter in px.
- `label` (`string`, default `'Collaborators'`): Group label (count is appended).

### Accessibility

- Each avatar is a button labelled with the name and status. Tooltips show on focus as well as hover.
- The overflow button exposes aria-expanded and controls the list.