# User menu (goodtabs UI)

An avatar that opens the account menu: name, email, Profile, Settings, Theme, Sign out.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/user-menu.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/user-menu`

## Usage

```tsx
import { UserMenu } from "@/components/ui/user-menu"

<UserMenu
  user={{ name: "Mira Chen", email: "mira@goodtabs.co", image: session.user.image }}
  onSelect={(action) => action === "signout" ? signOut() : router.push(`/${action}`)}
  theme={theme}
  onThemeChange={setTheme}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| user | `{ name: string; email: string; image?: string }` |  | Who is signed in. Initials come from the first two words of the name. |
| onSelect | `(action: "profile" | "settings" | "signout") => void` |  | Called when Profile, Settings or Sign out is chosen. |
| theme | `"light" | "dark" | "system"` | `"system"` | Current theme, marked in the Theme submenu. |
| onThemeChange | `(theme: "light" | "dark" | "system") => void` |  | Called with the chosen theme. The Theme submenu shows only when this is passed. |
| align | `"start" | "center" | "end"` | `"end"` | Where the menu lines up with the avatar. |

## When to use

- The far right of an app header or the bottom of a sidebar, once someone is signed in
- When account actions are few and fixed: profile, settings, theme, sign out
- Anywhere the avatar alone should be enough to find the account

## When not to use

- Signed out states; show a Sign in button instead
- Switching between workspaces or organisations; that needs its own switcher
- Long settings lists; link to a settings page from here

## Notes for agents

- It takes functions (onSelect, onThemeChange), so the component rendering it must be a client component
- Wire theme and onThemeChange to your theme provider, for example next-themes useTheme; the component holds no theme state
- The trigger is a plain button around shadcn's Avatar, named Account plus the user's name; extra button props spread onto it
- Routes are not built in: handle "profile" and "settings" in onSelect

Docs: https://ui.goodtabs.co/components/user-menu