# AvatarGroup

> Stacked, overlapping avatars separated by a surface-colored ring.

Source: https://ui.jcsoftdev.com/docs/components/avatar-group

Stacked, overlapping avatars separated by a surface-colored ring.

## Import

```ts
import { AvatarGroup } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/avatar-group`.

## Usage

```tsx
<AvatarGroup>
  <>
          <Avatar name="Diego Quispe" />
          <Avatar name="Marco Ríos" />
          <Avatar name="Lucho Vargas" />
        </>
</AvatarGroup>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/atoms-avatargroup--default)
- [Large](/storybook/?path=/story/atoms-avatargroup--large)
- [Single](/storybook/?path=/story/atoms-avatargroup--single)

## Source

`packages/ui/src/atoms/avatar-group/avatar-group.tsx`