Skip to content
blobz
Try it live
Blobz docs
Components

Avatar Chip

Display selected people, assignees, and recipients in a compact identity chip.

Janaki AmmalVikram Sarabhai
View code
avatar-chip-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import {
	AvatarChip,
	AvatarChipAvatar,
	AvatarChipLabel,
	AvatarChipRemove,
} from "@/components/blobz/avatar-chip";

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

export function AvatarChipExample() {
	return (
		<div className="flex flex-wrap items-center gap-3">
			<AvatarChip>
				<AvatarChipAvatar
					alt=""
					name={getFirstName(DEMO_PEOPLE.janakiAmmal)}
					palette={["#fff0e2", "#fa9769"]}
				/>
				<AvatarChipLabel>{DEMO_PEOPLE.janakiAmmal}</AvatarChipLabel>
			</AvatarChip>
			<AvatarChip variant="outline">
				<AvatarChipAvatar
					alt=""
					name={getFirstName(DEMO_PEOPLE.vikramSarabhai)}
					palette={BLUE_PALETTE}
				/>
				<AvatarChipLabel>{DEMO_PEOPLE.vikramSarabhai}</AvatarChipLabel>
				<AvatarChipRemove aria-label={`Remove ${DEMO_PEOPLE.vikramSarabhai}`} />
			</AvatarChip>
		</div>
	);
}

Installation

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

npx shadcn@latest add @blobz/avatar-chip

Usage

import {
  AvatarChip,
  AvatarChipAvatar,
  AvatarChipLabel,
  AvatarChipRemove,
} from "@/components/blobz/avatar-chip";

<AvatarChip>
  <AvatarChipAvatar alt="" name={user.id} />
  <AvatarChipLabel>{user.name}</AvatarChipLabel>
  <AvatarChipRemove aria-label={`Remove ${user.name}`} />
</AvatarChip>

Always give the remove action a label that identifies what will be removed.

API

Prop

Type

AvatarChipAvatar accepts every BlobAvatar prop, including the frame variant.

Avatar Badge

Pair a generated avatar with identity details and an optional role badge.

Avatar Social Proof

Combine an overlapping avatar group with concise community or trust copy.

Theme

On this page

InstallationUsageAPI