# Profile Dropdown

The account menu behind your avatar, with status, theme and a hold to sign out.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/profile-dropdown
```

## Usage

```tsx
import { ProfileDropdown } from '@/components/fetaui/profile-dropdown'

export function Example() {
  return <ProfileDropdown account={me} accounts={others} onSignOut={signOut} onThemeChange={setTheme} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| account | ProfileAccount | required |
| accounts | ProfileAccount[] | [] |
| plan | string | Pro |
| status | online, away, dnd |  |
| defaultStatus | online, away, dnd | online |
| onStatusChange | (status) => void |  |
| theme | light, dark, system |  |
| defaultTheme | light, dark, system | system |
| onThemeChange | (theme) => void |  |
| pausedNote | string |  |
| onSwitchAccount | (account) => void |  |
| onAddAccount | () => void |  |
| onProfile | () => void |  |
| onSettings | () => void |  |
| onBilling | () => void |  |
| onSignOut | () => void |  |
| defaultOpen | boolean | false |
| animated | boolean | true |

## When to use

- For the signed in person: account, status and theme.
- Keep it to four or five rows and send the rest to Settings.

## When not to use

- For menus that act on content: use Dropdown Menu.

## Accessibility

- The trigger is a button with aria-haspopup and aria-expanded, and the panel is a labelled dialog.
- Rows are menu items. Status and theme are radio groups. Accounts are menu item radios, with the current one checked.
- Holding announces Keep holding, and finishing announces Signed out.

## Motion

- The menu grows from the trigger in 180 ms: opacity, scale 0.96 and 4 px of rise.
- Status and theme slide their thumb on a spring, and the paused note grows in for Do not disturb.
- Sign out fills over 1.2 s and drains in 300 ms if released early.
- Switch account slides in from 24 px over 240 ms while the menu slides 24 px out.
- With reduced motion the menu fades and panels swap, but the fill still grows because it carries meaning.