Skip to content
blobz
Try it live
Blobz docs
Components

Avatar Account Menu

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

View code
avatar-account-menu-example.tsx
"use client";

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

import { AvatarAccountMenu } from "@/components/blobz/avatar-account-menu";

const ignoreAction = () => undefined;

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

const ACTIONS = [
	{
		id: "profile",
		label: "View profile",
		onSelect: ignoreAction,
	},
	{
		id: "settings",
		label: "Account settings",
		onSelect: ignoreAction,
	},
] as const;

export function AvatarAccountMenuExample() {
	return (
		<AvatarAccountMenu
			actions={ACTIONS}
			avatar={{
				name: getFirstName(DEMO_PEOPLE.janakiAmmal),
				palette: BLUE_PALETTE,
				size: "xl",
			}}
			contentClassName="dark"
			email="janaki@example.com"
			name={DEMO_PEOPLE.janakiAmmal}
			signOutAction={{
				id: "sign-out",
				label: "Sign out",
				onSelect: ignoreAction,
			}}
		/>
	);
}

Installation

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

npx shadcn@latest add @blobz/avatar-account-menu

The CLI also installs the official shadcn Dropdown Menu and the Blobz Avatar component.

Usage

"use client";

import { AvatarAccountMenu } from "@/components/blobz/avatar-account-menu";

<AvatarAccountMenu
  actions={[
    { id: "profile", label: "View profile", onSelect: openProfile },
    { id: "settings", label: "Settings", onSelect: openSettings },
  ]}
  avatar={{ name: user.id, size: "lg" }}
  email={user.email}
  name={user.name}
  signOutAction={{ id: "sign-out", label: "Sign out", onSelect: signOut }}
/>

This block is a Client Component because its action callbacks cross the menu interaction boundary.

API

Prop

Type

Installed files

avatar.tsx
avatar-account-menu.tsx

Avatar Select

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

Avatar Team List

A responsive roster with generated avatars, presence, roles, descriptions, and action slots.

Theme

On this page

InstallationUsageAPIInstalled files