Skip to content
blobz
Try it live
Blobz docs
Components

Avatar Badge

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

Gagandeep KangProFounder & CEO
View code
avatar-badge-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import { AvatarBadge } from "@/components/blobz/avatar-badge";

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

export function AvatarBadgeExample() {
	return (
		<AvatarBadge
			avatar={{
				name: getFirstName(DEMO_PEOPLE.gagandeepKang),
				palette: BLUE_PALETTE,
				size: "lg",
			}}
			badge="Pro"
			description="Founder & CEO"
			name={DEMO_PEOPLE.gagandeepKang}
		/>
	);
}

Installation

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

npx shadcn@latest add @blobz/avatar-badge

The Blobz Avatar and official shadcn Badge components are installed automatically.

Usage

import { AvatarBadge } from "@/components/blobz/avatar-badge";

<AvatarBadge
  avatar={{ name: user.id, size: "lg" }}
  badge="Pro"
  description="Founder & CEO"
  name="Gagandeep Kang"
/>

The avatar is decorative because the person's name is displayed beside it.

API

Prop

Type

Avatar Profile

Compound primitives for identity rows with metadata and actions.

Avatar Chip

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

Theme

On this page

InstallationUsageAPI