# Avatar Group

Overlapping stack of avatars with a cut-out ring around each face and a +N count for the rest. When someone joins, the others slide over to make room and the count updates in place.

> Composed · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add avatar-group
```

## Import

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

## Variants

- `overflow` — Overflow: `npx @lumioui/cli add avatar-group-overflow`
- `sizes` — Sizes: `npx @lumioui/cli add avatar-group-sizes`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `AvatarGroupItem[]` | — |
| `max?` | `number` | Max avatars rendered before the "+N" overflow bubble. Default 4. |
| `size?` | `"sm" | "md" | "lg"` | Avatar size. Default "md". |
| `onItemPress?` | `(item: AvatarGroupItem, index: number) => void` | Fired when an avatar is tapped — makes avatars pressable. |
| `onOverflowPress?` | `(items: AvatarGroupItem[]) => void` | Makes the "+N" bubble tappable (open the full roster). |
| `animate?` | `boolean` | Switch-on entrance on mount (dim → on, 40ms apart). Default true. |
| `haptic?` | `"light" | "selection" | false` | Haptic on taps. Default "light". |
| `ringClassName?` | `string` | Classes for the cut-out ring around each avatar. Match it to the surface the stack sits on. Default `border-card` (rows, cards). |
| `className?` | `string` | — |

Source: https://lumioui.com/components/avatar-group