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

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

Custom label

Override the default count caption with custom copy.

ACMWSR

Trusted by 12,000+ developers

custom-label-example.tsx

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

Compact

Small avatars with a custom count label formatter.

ACMWSR

Joined by 128 builders

compact-example.tsx

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

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