# Avatar: Group

> `<AvatarGroup />` overlaps its avatars and sets their size and shape. `max` collapses the rest into a count.

Example: https://hextaui.com/docs/avatar/examples/group
Component docs: https://hextaui.com/docs/avatar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/avatar-group.json
```

This adds `components/examples/avatar/group.tsx` with the Avatar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/avatar/group.tsx"
"use client"

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
  getInitials,
} from "@/components/ui/avatar"

const people = [
  { name: "Ada Lovelace", image: "/preview/landscape.svg" },
  { name: "Alan Turing", image: "/preview/landscape.svg" },
  { name: "Grace Hopper", image: "/preview/landscape.svg" },
  { name: "Katherine Johnson", image: null },
  { name: "Linus Torvalds", image: null },
  { name: "Margaret Hamilton", image: null },
  { name: "Tim Berners-Lee", image: null },
  { name: "Barbara Liskov", image: null },
]

const sizes = ["xs", "sm", "default", "lg", "xl"] as const

export function AvatarGroupDemo() {
  return (
    <div className="flex flex-col items-start gap-4">
      {sizes.map((size) => (
        <AvatarGroup key={size} size={size} max={4}>
          {people.map((person) => (
            <Avatar key={person.name}>
              {person.image ? <AvatarImage src={person.image} alt="" /> : null}
              <AvatarFallback>{getInitials(person.name)}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      ))}
      <AvatarGroup shape="square" max={5}>
        {people.map((person) => (
          <Avatar key={person.name}>
            {person.image ? <AvatarImage src={person.image} alt="" /> : null}
            <AvatarFallback>{getInitials(person.name)}</AvatarFallback>
          </Avatar>
        ))}
      </AvatarGroup>
    </div>
  )
}
```

## Props in this example

### AvatarImage

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | – |  |
| `alt` | `string` | – |  |

### AvatarGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"xs" \| "sm" \| "default" \| "lg" \| "xl"` | `"default"` |  |
| `shape` | `"circle" \| "square"` | `"circle"` |  |
| `max` | `number` | – | How many items to show, including the count. Values below 2 are raised to 2. |

## More Avatar examples

- [Sizes and shapes](https://hextaui.com/docs/avatar/examples/sizes.md)
- [Loading](https://hextaui.com/docs/avatar/examples/loading.md)
- [Initials](https://hextaui.com/docs/avatar/examples/initials.md)
- [Status](https://hextaui.com/docs/avatar/examples/status.md)
- [Linked group](https://hextaui.com/docs/avatar/examples/linked-group.md)
- [Layout](https://hextaui.com/docs/avatar/examples/layout.md)
- [Right to left](https://hextaui.com/docs/avatar/examples/rtl.md)