Account MenuProv1.0.0
The account corner of an app's top bar: your avatar with a presence dot opens who you are and your plan, a usage meter in lit cells, workspace switching, your own items with shortcuts, status, theme and a sign out that can wait on a promise.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-account-menuNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Name beside the avatar
Usage meter
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { AccountMenu } from "@/components/ui/lumen/controls/account-menu";
<AccountMenu
user={{ name: "Maya Chen", email: "maya@acme.com", plan: "Growth" }}
items={[{ label: "Profile", onSelect: () => router.push("/profile") }, { label: "Settings", shortcut: "⌘,", onSelect: () => router.push("/settings") }]}
onSignOut={() => signOut()}
/>Props
user–{ name, email?, image?, plan? }Who's signed in. Initials stand in for a missing image.
items–{ label, onSelect, icon?, shortcut? }[]Your account items. shortcut is shown, not bound: bind keys in your app.
workspaces / workspace / onWorkspaceChange–{ id, name }[]Two or more add a Workspace group (radio).
usage–{ label, used, limit }A ten-cell meter under the name; amber from 80%.
status / onStatusChange–"online" | "away" | "busy"The presence dot on the avatar and a Status submenu.
theme / onThemeChange–"light" | "dark" | "system"A Theme submenu. Without onThemeChange it applies .dark on <html> itself.
Show all 9 propsShow fewer
onSignOut–() => unknownAdds Sign out; a returned promise shows it working.
showNamefalsebooleanName, workspace and a chevron beside the avatar.
align"end""start" | "center" | "end"Where the menu lines up with the trigger.
Source
components/ui/lumen/controls/account-menu.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
