Account MenuPro

An avatar that widens into the account panel: who's signed in, the workspace (switched in a step that slides in), links, the theme and sign out.

Installation

When to use

The avatar in an app's header, or the account at a sidebar's foot (showName, side top): everything about the person signed in, in one place.
Apps with several workspaces or teams: switching happens inside the same panel, without a page.

When not to use

A site with no accounts: a plain link to sign in is enough.
Many settings to change at once: they belong on a settings page the menu links to.

Usage

Account Menu with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { AccountMenu } from "@/components/dashral/pro/account-menu"
4
5import { useState } from "react"
6import { Settings, UserRound } from "lucide-react"
7
8const workspaces = [
9  { id: "halcyon", name: "Halcyon Studio", detail: "Pro · 12 members" },
10  { id: "orbit", name: "Orbit Labs", detail: "Team · 28 members" },
11]
12
13const items = [
14  { id: "profile", label: "Profile", icon: <UserRound />, href: "/profile" },
15  { id: "settings", label: "Settings", icon: <Settings />, href: "/settings" },
16]
17
18export default function Account() {
19  const [workspace, setWorkspace] = useState("halcyon")
20  const [theme, setTheme] = useState<"light" | "dark" | "system">("system")
21  return (
22    <AccountMenu
23      user={{ name: "Maya Lindqvist", email: "maya@halcyon.studio" }}
24      workspaces={workspaces}
25      workspace={workspace}
26      onWorkspaceChange={setWorkspace}
27      items={items}
28      theme={{ value: theme, onValueChange: setTheme }}
29      onSignOut={() => console.log("signed out")}
30    />
31  )
32}

API reference

AccountMenu

An avatar that widens into the account panel: who's signed in, the workspace (switched in a step that slides in), links, the theme and sign out (checked in a step of its own). Shrinks back onto the avatar when done.

Prop	Type	Default
`user`	`AccountUser` Required.	—
`workspaces`	`AccountWorkspace[]`	—
`workspace`	`string` The workspace in use, by id (controlled), or the first.	—
`defaultWorkspace`	`string`	—
`onWorkspaceChange`	`(id: string) => void`	—
`onCreateWorkspace`	`() => void` Adds "Create workspace" under the workspaces.	—
`items`	`AccountItem[]`	`[]`
`theme`	`{ value: AccountTheme; onValueChange: (theme: AccountTheme) => void }` A theme switch in the panel: light, dark or system.	—
`onSignOut`	`() => void` Adds Sign out, after a check inside the panel.	—
`showName`	`boolean` The button: the avatar alone (default), or the avatar with the name, for a sidebar's foot.	`false`
`side`	`"bottom" \| "top"` Where it opens: down from the button (default) or up from it.	`"bottom"`
`align`	`"start" \| "end"` Which edge it keeps: the button's end (default) or its start.	`"end"`
`width`	`number` The panel's width, in px (never wider than the screen).	`300`
`linkAs`	`React.ElementType` Your router's link for items with an href; a plain <a> by default.	`"a"`
`className`	`string`	—
`classNames`	`AccountMenuClassNames`	—

type AccountUser

Prop	Type	Default
`name`	`string`	—
`email`	`string`	—
`avatar`	`string` A picture; initials from the name until (or instead of) it.	—
`status`	`AvatarStatus`	—

type AccountWorkspace

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`logo`	`React.ReactNode` Its mark: a logo or an initial. The first letter of its name on a tile by default.	—
`detail`	`string` A line under its name: its plan, its members.	—

type AccountItem

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`icon`	`React.ReactNode`	—
`shortcut`	`string[]` Its keys, shown beside it (["mod", ","]). Shown only: wire them in your app if they should work outside.	—
`href`	`string` A link (rendered with `linkAs`), or…	—
`onSelect`	`() => void` …an action.	—
`group`	`string` Items of the same group sit together; a line separates groups.	—

type AccountTheme

= "light" | "dark" | "system"

type AccountMenuClassNames

Prop	Type	Default
`root`	`string`	—
`button`	`string`	—
`panel`	`string`	—

Keyboard

Keys	Action
`↑`or`↓`	Through the rows
`Home`or`End`	The first or last row
`→`or`Enter`	On the workspace: open the workspaces; on Sign out: open the check
`←`or`→`	On Theme: light, dark or system
`←`	In a step: back to the menu
`Esc`	Back from a step, or close; the focus returns to the avatar

Accessibility

The button is named "Account: <name>" (or shows the name, with showName) and says whether its panel is open.
The panel is a dialog (aria-modal); its rows are menu items with one tab stop, the workspaces menu item radios with aria-checked, the theme a radiogroup.
Sign out asks first, inside the panel, so it can't happen by a stray press.

Motion

The avatar widens into the panel (0.42 s) and, closing, the panel shrinks back while the two crossfade.
One highlight glides from row to row; the workspaces and the sign-out check slide in as the panel reshapes. A picked workspace's check moves first, then the step slides back. The theme thumb glides (right to left too).
Smooth tweens on [0.4, 0, 0.2, 1], never springs, except the small press. With reduced motion it only fades.