# Avatar group (goodtabs UI)

Overlapping avatars with initials fallback and a +n count for the rest.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/avatar-group.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/avatar-group`

## Usage

```tsx
import { AvatarGroup } from "@/components/ui/avatar-group"

<AvatarGroup people={[{ name: "Priya Nair" }, { name: "Hana Sato" }]} max={4} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| people | `{ name: string; src?: string }[]` |  | Everyone in the group. Initials show without an image. |
| max | `number` | `4` | Avatars shown before the +n count. |
| size | `"sm" | "default" | "lg"` | `"default"` | 24px, 32px or 40px. |

## When to use

- Showing who is on a project, a thread or a document in a small space
- Card footers and table cells that list a few people

## When not to use

- When people need to be clicked or hovered one by one: use a list
- A single person: use Avatar

## Notes for agents

- Built on the avatar primitives; the group is one role img whose label lists every name
- Initials come from the first two words of the name
- The count is the number of people past max, so it is hidden when everyone fits

Docs: https://ui.goodtabs.co/components/avatar-group