Avatar Stack
A row of overlapping avatars for showing a group of people compactly.
import { AvatarStack } from "@sanity/sanity-id/components/avatar-stack"Props
| Prop | Type | Description |
|---|---|---|
persons (required) | Array<{ name?: string; image: string | FunctionComponent<ComponentProps<"img">> }> | List of persons to display as stacked avatars |
className | string | Additional CSS classes |
size | "sm" | "md" | Size of each avatar default value: "md" |
Required.
Usage
Kevin Harwood
Kevin Harwood, Saskia Bobinska
Kevin Harwood + 2
Kevin Harwood + 3
Kevin Harwood + 7
1import { AvatarStack } from "@sanity/sanity-id/components/avatar-stack"
2
3export default () => {
4 const persons = [
5 { name: "Kevin Harwood", image: "https://cdn.sanity.io/images/3do82whm/next/30ff6e8265637f4efac13903d09284b6e350eda4-512x512.png" },
6 { name: "Saskia Bobinska", image: "https://cdn.sanity.io/images/3do82whm/next/20a113998dc15c76f6f7e31ce640524bdd6d5b5c-5184x3456.jpg" },
7 { name: "Bram Doppen", image: "https://cdn.sanity.io/images/3do82whm/next/1523a5ff4f2bc463580087d9b14946d9cea5208e-512x512.jpg" },
8 { name: "Elaine Sloboda", image: "https://cdn.sanity.io/images/3do82whm/next/cd1d1c5e029f7f271df66c5e04f628b752c478f4-400x400.jpg" },
9 { name: "Erin Allen", image: "https://cdn.sanity.io/images/3do82whm/next/b01c58c95c6ef9dff752e9a7919080ad64cc14da-978x960.png" },
10 { name: "Eppo Heemstra", image: "https://cdn.sanity.io/images/3do82whm/next/a5270d24093f2ffda0f9c1f647cbf6838e74fbe7-200x200.jpg" },
11 { name: "Zahra Dargahi", image: "https://cdn.sanity.io/images/3do82whm/next/86ecacf1b80e14b475b39ee7185982a213786fc3-400x400.jpg" },
12 { name: "Jamie Bradley", image: "https://cdn.sanity.io/images/3do82whm/next/90d4519bfffc348224d8a91f1de9351158394a4a-415x415.jpg" },
13 ]
14 return (
15 <div className="grid gap-y-16">
16 <AvatarStack size="sm" persons={persons.slice(0, 1)} />
17 <AvatarStack size="sm" persons={persons.slice(0, 2)} />
18 <AvatarStack size="sm" persons={persons.slice(0, 3)} />
19 <AvatarStack size="sm" persons={persons.slice(0, 4)} />
20 <AvatarStack size="sm" persons={persons} />
21 </div>
22 )
23 }
Kevin Harwood
Kevin Harwood, Saskia Bobinska
Kevin Harwood + 2
Kevin Harwood + 3
Kevin Harwood + 7
1import { AvatarStack } from "@sanity/sanity-id/components/avatar-stack"
2
3export default () => {
4 const persons = [
5 { name: "Kevin Harwood", image: "https://cdn.sanity.io/images/3do82whm/next/30ff6e8265637f4efac13903d09284b6e350eda4-512x512.png" },
6 { name: "Saskia Bobinska", image: "https://cdn.sanity.io/images/3do82whm/next/20a113998dc15c76f6f7e31ce640524bdd6d5b5c-5184x3456.jpg" },
7 { name: "Bram Doppen", image: "https://cdn.sanity.io/images/3do82whm/next/1523a5ff4f2bc463580087d9b14946d9cea5208e-512x512.jpg" },
8 { name: "Elaine Sloboda", image: "https://cdn.sanity.io/images/3do82whm/next/cd1d1c5e029f7f271df66c5e04f628b752c478f4-400x400.jpg" },
9 { name: "Erin Allen", image: "https://cdn.sanity.io/images/3do82whm/next/b01c58c95c6ef9dff752e9a7919080ad64cc14da-978x960.png" },
10 { name: "Eppo Heemstra", image: "https://cdn.sanity.io/images/3do82whm/next/a5270d24093f2ffda0f9c1f647cbf6838e74fbe7-200x200.jpg" },
11 { name: "Zahra Dargahi", image: "https://cdn.sanity.io/images/3do82whm/next/86ecacf1b80e14b475b39ee7185982a213786fc3-400x400.jpg" },
12 { name: "Jamie Bradley", image: "https://cdn.sanity.io/images/3do82whm/next/90d4519bfffc348224d8a91f1de9351158394a4a-415x415.jpg" },
13 ]
14 return (
15 <div className="grid gap-y-16">
16 <AvatarStack size="md" persons={persons.slice(0, 1)} />
17 <AvatarStack size="md" persons={persons.slice(0, 2)} />
18 <AvatarStack size="md" persons={persons.slice(0, 3)} />
19 <AvatarStack size="md" persons={persons.slice(0, 4)} />
20 <AvatarStack size="md" persons={persons} />
21 </div>
22 )
23 }