Skip to content
blobz
Try it live
Blobz docs
Components

Avatar Group

Compose overlapping Blobz avatars and a matching overflow count.

4 more people
View code
avatar-group-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import { BlobAvatar } from "@/components/blobz/avatar";
import {
	BlobAvatarGroup,
	BlobAvatarGroupCount,
	BlobAvatarGroupItem,
} from "@/components/blobz/avatar-group";

const TEAM = [
	{ id: "janaki", name: getFirstName(DEMO_PEOPLE.janakiAmmal) },
	{ id: "vikram", name: getFirstName(DEMO_PEOPLE.vikramSarabhai) },
	{ id: "kalpana", name: getFirstName(DEMO_PEOPLE.kalpanaChawla) },
] as const;

const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;

export function AvatarGroupExample() {
	return (
		<BlobAvatarGroup aria-label="Project team">
			{TEAM.map((member) => (
				<BlobAvatarGroupItem key={member.id}>
					<BlobAvatar alt="" name={member.name} palette={BLUE_PALETTE} />
				</BlobAvatarGroupItem>
			))}
			<BlobAvatarGroupCount count={4} />
		</BlobAvatarGroup>
	);
}

Installation

Register the Blobz registry once in your project, then install:

npx shadcn@latest add @blobz/avatar-group

Usage

import { BlobAvatar } from "@/components/blobz/avatar";
import {
  BlobAvatarGroup,
  BlobAvatarGroupCount,
  BlobAvatarGroupItem,
} from "@/components/blobz/avatar-group";

<BlobAvatarGroup aria-label="Project team">
  <BlobAvatarGroupItem>
    <BlobAvatar alt="" name="Janaki" />
  </BlobAvatarGroupItem>
  <BlobAvatarGroupItem>
    <BlobAvatar alt="" name="Vikram" />
  </BlobAvatarGroupItem>
  <BlobAvatarGroupCount count={3} />
</BlobAvatarGroup>

Give the group a useful accessible label. Individual avatars can remain decorative when the surrounding interface provides the member names.

Count API

Prop

Type

Avatar Status

Add an accessible presence indicator to a generated Blobz avatar.

Avatar Profile

Compound primitives for identity rows with metadata and actions.

Theme

On this page

InstallationUsageCount API