Person menu

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/person-menu

Brings in: bidi, dropdown-menu, initials, link, locale, motion, theme-setting, tokens, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { Download } from "lucide-react"
import { PersonMenu } from "@/components/candor/person-menu"
import type { ThemeChoice } from "@/components/candor/theme-setting"

const sam = { name: "Sam Rivera", email: "sam@acme.example", role: "Admin" }

// Each entry shows only when the app wires it. The avatar form is the top bar's; the row form is a sidebar's foot
// (AppSidebar's foot is this menu).
export default function Example() {
  // The app keeps the theme and puts it on the page; the menu only shows and changes the choice.
  const [theme, setTheme] = React.useState<ThemeChoice>("light")
  return (
    <div className="flex flex-wrap items-start gap-8">
      <div className="flex h-14 w-80 items-center justify-end gap-2 rounded-lg border bg-chrome px-3">
        <span className="me-auto text-xs text-muted-foreground">Top bar</span>
        <PersonMenu
          user={sam}
          onProfile={() => {}}
          onShortcuts={() => {}}
          theme={{ value: theme, onValueChange: setTheme }}
          help={{ href: "#help" }}
          items={[{ id: "export", label: "Export my data", Icon: Download, onSelect: () => {} }]}
          onSignOut={() => {}}
        />
      </div>
      <div className="flex h-40 w-60 flex-col justify-end rounded-lg border bg-sidebar p-2">
        <PersonMenu user={sam} form="row" onProfile={() => {}} onSignOut={() => {}} />
      </div>
    </div>
  )
}

<PersonMenu>

Strings

Motion

Set with --cd-motion-person-menu-<moment>-* in your brand file; the families are in the design reference.

Types

PersonMenuUser

The signed-in person: their name, their email, and their role when the app has one to show in place of the email.

{ /** As the person wrote it; its first letters make the avatar's initials. */ name: string; /** Shown under the name in the menu, and in the row form when there is no `role`. */ email: string; /** Shown in the row form in place of the email ("Admin"). */ role?: string | undefined; }

PersonMenuItem

One of the app's own entries in the menu, drawn as text.

{ /** A key for the entry. */ id: string; /** The entry's words, drawn as text. */ label: string; /** An icon before the words. */ Icon?: LucideIcon | undefined; /** Called when the person chooses it. */ onSelect: () => void; }

PersonMenuChoices

A group of choices in the menu, one of them current, drawn as a radio group under its label (a density, a language). Nothing is chosen for the person: with `value` null, none is checked.

{ /** A key for the group. */ id: string; /** The group's name, shown above its choices and read as the group's name. */ label: string; /** The current choice's value, as the app last stored it, or null when none is chosen. */ value: string | null; /** The choices, in order. */ options: { value: string; label: string; }[]; /** Called with the value the person chose. */ onValueChange: (value: string) => void; }

PersonMenuTheme

The person's theme in the menu: ThemeSetting's choices (and its words, under `themeSetting`), as a radio group.

{ /** The person's theme as the app last stored it. Left out, none is checked. */ value?: ThemeChoice | undefined; /** Called with the theme the person chose; the app keeps it and puts it on the page, as for ThemeSetting. */ onValueChange: (next: ThemeChoice) => void; /** Which themes to offer, in order. Defaults to light, dark and high contrast; add "system" for "Match my system". */ options?: ThemeChoice[] | undefined; }

PersonMenuHelp

Where people get help: a link, or the app's own handler. `label` defaults to "Help".

{ href?: string | undefined; onOpen?: (() => void) | undefined; label?: string | undefined }