Atelier UI

搜索组件…

搜索组件…

User Menu

头像触发的账户菜单,含资料头部、链接、主题切换和退出登录。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

UserMenuProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"div">, "children">

属性类型默认值说明
user* 必填{ name: string; email: string; initials?: string }——
links* 必填UserMenuLink[]——
themeUserMenuTheme—Controlled theme
defaultThemeUserMenuTheme"system"—
onThemeChange(theme: UserMenuTheme) => void——
onSignOut() => void——
align"start" | "end""end"—
defaultOpenbooleanfalseRender the menu open on mount (without moving focus)

安装

$ npx shadcn@latest add https://chromotion.dev/r/user-menu.json

同类组件