Skip to content
blobz
Try it live
Blobz docs
Components

Avatar Select

Select a person with a generated avatar in both the trigger and option list.

View code
avatar-select-example.tsx
"use client";

import { DEMO_PEOPLE, getFirstName } from "@/lib/demo-people";

import { AvatarSelect } from "@/components/blobz/avatar-select";

const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;
const PEOPLE = [
	{
		avatar: { name: getFirstName(DEMO_PEOPLE.rajReddy), palette: BLUE_PALETTE },
		description: "Product designer",
		id: "raj",
		name: DEMO_PEOPLE.rajReddy,
	},
	{
		avatar: {
			name: getFirstName(DEMO_PEOPLE.janakiAmmal),
			palette: BLUE_PALETTE,
		},
		description: "Engineering lead",
		id: "janaki",
		name: DEMO_PEOPLE.janakiAmmal,
	},
	{
		avatar: {
			name: getFirstName(DEMO_PEOPLE.vikramSarabhai),
			palette: BLUE_PALETTE,
		},
		description: "Platform engineer",
		id: "vikram",
		name: DEMO_PEOPLE.vikramSarabhai,
	},
] as const;

export function AvatarSelectExample() {
	return (
		<AvatarSelect
			className="max-w-sm"
			contentClassName="dark"
			defaultValue="raj"
			items={PEOPLE}
		/>
	);
}

Installation

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

npx shadcn@latest add @blobz/avatar-select

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

Usage

"use client";

import { AvatarSelect } from "@/components/blobz/avatar-select";

<AvatarSelect
  defaultValue="paul"
  items={people}
  onValueChange={setSelectedPerson}
/>

Each item requires a stable id, visible name, and Blobz avatar props. The optional description is shown as supporting text.

API

Prop

Type

Avatar Social Proof

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

Avatar Account Menu

A ready-to-ship account menu with an avatar trigger, identity summary, and typed actions.

Theme

On this page

InstallationUsageAPI