Skip to content
blobz
Try it live
Blobz docs
Components

Avatar

A server-renderable Blobz avatar with semantic shadcn size, frame, and surface variants.

Rounded

Rounded is the default frame and does not require a frame prop.

Janaki Ammal avatarVikram Sarabhai avatarKalpana Chawla avatar
View code
avatar-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import { BlobAvatar } from "@/components/blobz/avatar";

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

export function AvatarExample() {
	return (
		<div className="flex items-end gap-5">
			<BlobAvatar
				alt={`${DEMO_PEOPLE.janakiAmmal} avatar`}
				name={getFirstName(DEMO_PEOPLE.janakiAmmal)}
				palette={BLUE_PALETTE}
				size="lg"
			/>
			<BlobAvatar
				alt={`${DEMO_PEOPLE.vikramSarabhai} avatar`}
				name={getFirstName(DEMO_PEOPLE.vikramSarabhai)}
				palette={BLUE_PALETTE}
				size="xl"
				variant="outline"
			/>
			<BlobAvatar
				alt={`${DEMO_PEOPLE.kalpanaChawla} avatar`}
				name={getFirstName(DEMO_PEOPLE.kalpanaChawla)}
				palette={BLUE_PALETTE}
				size="lg"
				variant="elevated"
			/>
		</div>
	);
}

Installation

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

npx shadcn@latest add @blobz/avatar

This installs @blobz/react, class-variance-authority, and cn when they are not already present.

Usage

import { BlobAvatar } from "@/components/blobz/avatar";

<BlobAvatar
  alt="Janaki avatar"
  name="Janaki"
  size="lg"
  variant="outline"
/>

Use alt="" when a visible name beside the avatar already identifies the person.

Circle

Use frame="circle" for profile photos, presence lists, and familiar account surfaces.

Janaki Ammal avatarVikram Sarabhai avatar
View code
avatar-circle-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import { BlobAvatar } from "@/components/blobz/avatar";

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

export function AvatarCircleExample() {
	return (
		<div className="flex items-center gap-5">
			<BlobAvatar
				alt={`${DEMO_PEOPLE.janakiAmmal} avatar`}
				frame="circle"
				name={getFirstName(DEMO_PEOPLE.janakiAmmal)}
				palette={BLUE_PALETTE}
				size="xl"
			/>
			<BlobAvatar
				alt={`${DEMO_PEOPLE.vikramSarabhai} avatar`}
				frame="circle"
				name={getFirstName(DEMO_PEOPLE.vikramSarabhai)}
				palette={BLUE_PALETTE}
				size="xl"
				variant="outline"
			/>
		</div>
	);
}

Square

Use frame="square" when the avatar needs to align tightly with square media or dense data grids.

Kalpana Chawla avatarSrinivasa Ramanujan avatar
View code
avatar-square-example.tsx
import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";
import { BlobAvatar } from "@/components/blobz/avatar";

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

export function AvatarSquareExample() {
	return (
		<div className="flex items-center gap-5">
			<BlobAvatar
				alt={`${DEMO_PEOPLE.kalpanaChawla} avatar`}
				frame="square"
				name={getFirstName(DEMO_PEOPLE.kalpanaChawla)}
				palette={BLUE_PALETTE}
				size="xl"
			/>
			<BlobAvatar
				alt={`${DEMO_PEOPLE.srinivasaRamanujan} avatar`}
				frame="square"
				name={getFirstName(DEMO_PEOPLE.srinivasaRamanujan)}
				palette={BLUE_PALETTE}
				size="xl"
				variant="outline"
			/>
		</div>
	);
}

API

Prop

Type

Components

Ready-to-ship avatar components and blocks powered by @blobz/react and installed through the shadcn CLI.

Avatar Status

Add an accessible presence indicator to a generated Blobz avatar.

Theme

On this page

RoundedInstallationUsageCircleSquareAPI