User menu

Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.

$npx shadcn@latest add @silicon-ui/user-menu

motionproduct

Installation

$npx shadcn@latest add @silicon-ui/user-menu

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/user-menu/user-menu.tsx
- components/silicon-ui/user-menu/user-menu.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { UserMenu } from "@/components/silicon-ui/user-menu/user-menu";

Prop	Type	Default
`user*`	`UserMenuUser`	—
`status` Presence status. Passing `status` or `onStatusChange` shows the presence dot and an inline status switch.	`UserStatus` `"available""busy""away"`	—
`defaultStatus`	`UserStatus` `"available""busy""away"`	`"available"`
`onStatusChange`	`(status: UserStatus) => void`	—
`theme`	`ThemePreference` `"light""dark""system"`	—
`defaultTheme`	`ThemePreference` `"light""dark""system"`	`"system"`
`onThemeChange` Reports the choice. Applying it to the page is up to the app.	`(theme: ThemePreference) => void`	—
`showTheme` Shows the inline light, dark, and system switch.	`boolean`	`true`
`items` Account destinations with optional shortcut hints, such as ["⌘", ","]. Keep it to three or four.	`UserMenuItem[]`	`[]`
`onSignOut`	`() => void \| Promise<unknown>`	—
`signOutKeys`	`string[]`	—
`align`	`"start" \| "center" \| "end"`	`"end"`
`showName` Shows the name and a chevron beside the avatar from 640px up.	`boolean`	`false`
`open`	`boolean`	—
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`	—
`portal` Renders the desktop panel in a portal on the body. Pass false to keep it inside the trigger's wrapper.	`boolean`	`true`
`ref` The trigger button, for returning focus after the menu is swapped out.	`Ref<HTMLButtonElement>`	—
`className`	`string`	—

Prop	Type	Default
`status*`	`UserStatus \| "offline"`	—
`className`	`string`	—