---
title: "Avatar Stack"
description: "A row of overlapping avatars for showing a group of people compactly."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/avatar-stack"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/avatar-stack.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Avatar Stack

A row of overlapping avatars for showing a group of people compactly.

```tsx
import { AvatarStack } from "@sanity/sanity-id/components/avatar-stack"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `persons` | `Array<{ name?: string; image: string \| FunctionComponent<ComponentProps<"img">> }>` | yes | — | List of persons to display as stacked avatars |
| `className` | `string` | no | — | Additional CSS classes |
| `size` | `"sm" \| "md"` | no | `"md"` | Size of each avatar |

## Usage

### Small

```tsx
import { AvatarStack } from "@sanity/sanity-id/components/avatar-stack"

export default () => {
	const persons = [
		{ name: "Kevin Harwood", image: "https://cdn.sanity.io/images/3do82whm/next/30ff6e8265637f4efac13903d09284b6e350eda4-512x512.png" },
		{ name: "Saskia Bobinska", image: "https://cdn.sanity.io/images/3do82whm/next/20a113998dc15c76f6f7e31ce640524bdd6d5b5c-5184x3456.jpg" },
		{ name: "Bram Doppen", image: "https://cdn.sanity.io/images/3do82whm/next/1523a5ff4f2bc463580087d9b14946d9cea5208e-512x512.jpg" },
		{ name: "Elaine Sloboda", image: "https://cdn.sanity.io/images/3do82whm/next/cd1d1c5e029f7f271df66c5e04f628b752c478f4-400x400.jpg" },
		{ name: "Erin Allen", image: "https://cdn.sanity.io/images/3do82whm/next/b01c58c95c6ef9dff752e9a7919080ad64cc14da-978x960.png" },
		{ name: "Eppo Heemstra", image: "https://cdn.sanity.io/images/3do82whm/next/a5270d24093f2ffda0f9c1f647cbf6838e74fbe7-200x200.jpg" },
		{ name: "Zahra Dargahi", image: "https://cdn.sanity.io/images/3do82whm/next/86ecacf1b80e14b475b39ee7185982a213786fc3-400x400.jpg" },
		{ name: "Jamie Bradley", image: "https://cdn.sanity.io/images/3do82whm/next/90d4519bfffc348224d8a91f1de9351158394a4a-415x415.jpg" },
	]
	return (
		<div className="grid gap-y-16">
			<AvatarStack size="sm" persons={persons.slice(0, 1)} />
			<AvatarStack size="sm" persons={persons.slice(0, 2)} />
			<AvatarStack size="sm" persons={persons.slice(0, 3)} />
			<AvatarStack size="sm" persons={persons.slice(0, 4)} />
			<AvatarStack size="sm" persons={persons} />
		</div>
	)
}
```

### Medium

```tsx
import { AvatarStack } from "@sanity/sanity-id/components/avatar-stack"

export default () => {
	const persons = [
		{ name: "Kevin Harwood", image: "https://cdn.sanity.io/images/3do82whm/next/30ff6e8265637f4efac13903d09284b6e350eda4-512x512.png" },
		{ name: "Saskia Bobinska", image: "https://cdn.sanity.io/images/3do82whm/next/20a113998dc15c76f6f7e31ce640524bdd6d5b5c-5184x3456.jpg" },
		{ name: "Bram Doppen", image: "https://cdn.sanity.io/images/3do82whm/next/1523a5ff4f2bc463580087d9b14946d9cea5208e-512x512.jpg" },
		{ name: "Elaine Sloboda", image: "https://cdn.sanity.io/images/3do82whm/next/cd1d1c5e029f7f271df66c5e04f628b752c478f4-400x400.jpg" },
		{ name: "Erin Allen", image: "https://cdn.sanity.io/images/3do82whm/next/b01c58c95c6ef9dff752e9a7919080ad64cc14da-978x960.png" },
		{ name: "Eppo Heemstra", image: "https://cdn.sanity.io/images/3do82whm/next/a5270d24093f2ffda0f9c1f647cbf6838e74fbe7-200x200.jpg" },
		{ name: "Zahra Dargahi", image: "https://cdn.sanity.io/images/3do82whm/next/86ecacf1b80e14b475b39ee7185982a213786fc3-400x400.jpg" },
		{ name: "Jamie Bradley", image: "https://cdn.sanity.io/images/3do82whm/next/90d4519bfffc348224d8a91f1de9351158394a4a-415x415.jpg" },
	]
	return (
		<div className="grid gap-y-16">
			<AvatarStack size="md" persons={persons.slice(0, 1)} />
			<AvatarStack size="md" persons={persons.slice(0, 2)} />
			<AvatarStack size="md" persons={persons.slice(0, 3)} />
			<AvatarStack size="md" persons={persons.slice(0, 4)} />
			<AvatarStack size="md" persons={persons} />
		</div>
	)
}
```