Avatar Group Row

Stacked avatars with optional overflow count and social-proof caption.

Default

Stacked avatars with overflow count and default caption.

ACMWSREP

Joined by 2,400 teams

default-example.tsx

1"use client";
2
3import { AvatarGroupRow } from "@/registry/ui/avatar-group-row";
4
5const DEMO_AVATARS = [
6  { id: "1", alt: "Ada Chen", fallback: "AC" },
7  { id: "2", alt: "Marcus Webb", fallback: "MW" },
8  { id: "3", alt: "Sofia Rivera", fallback: "SR" },
9  { id: "4", alt: "Elena Park", fallback: "EP" },
10  { id: "5", alt: "James Okonkwo", fallback: "JO" },
11  { id: "6", alt: "Priya Shah", fallback: "PS" },
12];
13
14export function AvatarGroupRowDefaultExample() {
15  return (
16    <AvatarGroupRow avatars={DEMO_AVATARS} count={2400} maxVisible={4} />
17  );
18}

Custom label

Override the default count caption with custom copy.

ACMWSR

Trusted by 12,000+ developers

custom-label-example.tsx

1"use client";
2
3import { AvatarGroupRow } from "@/registry/ui/avatar-group-row";
4
5const DEMO_AVATARS = [
6  { id: "1", alt: "Ada Chen", fallback: "AC" },
7  { id: "2", alt: "Marcus Webb", fallback: "MW" },
8  { id: "3", alt: "Sofia Rivera", fallback: "SR" },
9  { id: "4", alt: "Elena Park", fallback: "EP" },
10  { id: "5", alt: "James Okonkwo", fallback: "JO" },
11  { id: "6", alt: "Priya Shah", fallback: "PS" },
12];
13
14export function AvatarGroupRowCustomLabelExample() {
15  return (
16    <AvatarGroupRow
17      avatars={DEMO_AVATARS.slice(0, 3)}
18      label="Trusted by 12,000+ developers"
19      maxVisible={3}
20    />
21  );
22}

Compact

Small avatars with a custom count label formatter.

ACMWSR

Joined by 128 builders

compact-example.tsx

1"use client";
2
3import { AvatarGroupRow } from "@/registry/ui/avatar-group-row";
4
5const DEMO_AVATARS = [
6  { id: "1", alt: "Ada Chen", fallback: "AC" },
7  { id: "2", alt: "Marcus Webb", fallback: "MW" },
8  { id: "3", alt: "Sofia Rivera", fallback: "SR" },
9  { id: "4", alt: "Elena Park", fallback: "EP" },
10  { id: "5", alt: "James Okonkwo", fallback: "JO" },
11  { id: "6", alt: "Priya Shah", fallback: "PS" },
12];
13
14export function AvatarGroupRowCompactExample() {
15  return (
16    <AvatarGroupRow
17      avatars={DEMO_AVATARS}
18      count={128}
19      maxVisible={3}
20      size="sm"
21      countLabel={(n) => `Joined by ${n} builders`}
22    />
23  );
24}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/avatar-group-row

Props

Name	Type	Default	Description
avatars	AvatarGroupRowItem[]	Required	Avatar entries with id, alt, optional src and fallback
maxVisible	number	4	Maximum avatars shown before overflow count
label	string	undefined	Custom caption beside the avatar stack
count	number	undefined	When set without label, renders default joined-by-teams caption
countLabel	(count: number) => string	undefined	Formatter for count-based caption
size	"sm" \| "default" \| "lg"	"default"	Avatar size passed to each avatar in the stack
className	string	undefined	Classes for the root row container
labelClassName	string	undefined	Classes for the caption text