Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn account dropdown opened from an avatar, or an avatar with name and email, that shows a profile header, links, a theme picker and sign out.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
user | { name: string; email: string; image?: string; plan?: string; status?: UserMenuStatus } | - | The signed-in person. Initials show when there is no image. |
groups | UserMenuItem[][] | [] | Groups of items, with separators between them. |
theme | "light" | "dark" | "system" | - | Current theme. Adds a Theme submenu when onThemeChange is also set. |
onThemeChange | (theme: UserMenuTheme) => void | - | Called with the chosen theme. |
onSignOut | () => void | - | Adds a destructive "Sign out" item. |
variant | "avatar" | "full" | "avatar" | Trigger style: avatar only, or avatar with name and email. |
align | "start" | "center" | "end" | "end" | Menu alignment. |
side | "top" | "right" | "bottom" | "left" | "bottom" | Side the menu opens on. |
open | boolean | - | Controlled open state. |
defaultOpen | boolean | - | Initial open state. |
onOpenChange | (open: boolean) => void | - | Called when the menu opens or closes. |
modal | boolean | true | Block interaction outside the menu while open. |
Also accepts all <button> props (applied to the trigger).
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Item text. |
href | string | - | Renders the item as a link. |
onSelect | () => void | - | Runs when chosen. |
icon | React.ReactNode | - | Leading icon. |
shortcut | string | - | Keys shown at the end. Display only. |
badge | string | - | Small text at the end. |
status is one of "online", "away", "busy" or "offline" and adds a dot with screen reader text.avatar variant the trigger is labelled Account menu for <name>.