## Overview [#overview]
The `AvatarGroup` component is a wrapper that arranges multiple `Avatar` components with advanced features like overlapping effects, hover animations, and integrated tooltips. It uses the base [Avatar](/primitives/avatar) component internally, adding layout and interaction capabilities specifically designed for displaying groups of users.
## Usage [#usage]
```tsx showLineNumbers
import {
AvatarGroup,
AvatarGroupTooltip,
Avatar,
AvatarFallback,
AvatarImage,
} from "@tilt-legal/cubitt-components/primitives";
```
```tsx showLineNumbers
U1
User 1
U2
User 2
```
## Examples [#examples]
### Default [#default]
```tsx
import {
AvatarGroup,
AvatarGroupTooltip,
Avatar,
AvatarFallback,
AvatarImage,
} from "@tilt-legal/cubitt-components/primitives";
IW
Isaac Wong
CC
Cooper Corbett
;
```
### With Count [#with-count]
```tsx
import {
AvatarGroup,
AvatarGroupTooltip,
Avatar,
AvatarFallback,
AvatarImage,
} from "@tilt-legal/cubitt-components/primitives";
IW
Isaac Wong
CC
Cooper Corbett
SL
Sandon Lai
+5
5 more users
;
```
### Inverted Overlap [#inverted-overlap]
```tsx
import {
AvatarGroup,
AvatarGroupTooltip,
Avatar,
AvatarFallback,
AvatarImage,
} from "@tilt-legal/cubitt-components/primitives";
IW
Isaac Wong
CC
Cooper Corbett
SL
Sandon Lai
+2
2 more users
;
```
## Props [#props]
### AvatarGroup [#avatargroup]
| Prop | Type | Description |
| --------------- | -------------------------------- | ----------------------------------------------------- |
| `children` | `React.ReactElement[]` | Array of Avatar components to display in the group |
| `invertOverlap` | `boolean` | Inverts the overlap direction of avatars |
| `translate` | `number` | Percentage for hover translation effect (-30 default) |
| `size` | `string \| number` | Size of each avatar (43px default) |
| `border` | `string \| number` | Border width around avatars (3px default) |
| `columnSize` | `string \| number` | Width of each avatar column (37px default) |
| `align` | `"start" \| "center" \| "end"` | Vertical alignment of avatars (end default) |
| `tooltipProps` | `Omit` | Props to pass to tooltip components |
| `className` | `string` | Additional CSS classes to apply to the group |
| `...props` | `React.ComponentProps<"div">` | All other div HTML attributes |
### AvatarGroupTooltip [#avatargrouptooltip]
| Prop | Type | Description |
| ----------- | --------------------------------------------- | ---------------------------------------------- |
| `children` | `React.ReactNode` | Content to display in the tooltip |
| `className` | `string` | Additional CSS classes to apply to the tooltip |
| `...props` | `React.ComponentProps` | All other tooltip content props |