# AvatarGroup

- Page: <https://kznlabs.github.io/labsUI/components/avatar-group>

## AvatarGroup (`avatar-group`, component)

Overlapping avatars with a +N overflow chip. Hover gently enlarges the avatar on a spring, keeping stack order.

- Install: `npx @kznlabs/labsui add avatar-group`
- Docs: <https://kznlabs.github.io/labsUI/components/avatar-group>
- Brings: avatar, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<AvatarGroup>`: Overlapping avatars with a `+N` overflow chip. Hover gently enlarges the avatar on a spring, staying in stack order.
  - `users: GroupUser[]`: People in order; `alt` is each one's name.
  - `max?: number` = `4`: How many avatars to show before the `+N` chip.
  - `size?: "sm" | "default" | "lg"` = `"default"`: Size of every avatar and the chip.

- `type GroupUser = { alt: string; src?: string; id?: string; }`

### Usage

```tsx
<AvatarGroup users={team} max={4} size="lg" />
```

### Example: team.tsx

```tsx
import { AvatarGroup } from "@/components/ui/avatar-group";
export function Team({ users }: { users: { alt: string; src?: string }[] }) {
  return <AvatarGroup users={users} max={4} size="lg" />;
}
```