An avatar-triggered account menu with an identity header, account links, inline theme and status switches, and sign out, that collapses into a bottom sheet on phones.
"use client";
import UserMenu from "@/components/ui/user-menu";
import { CreditCard, Settings, UserRound } from "lucide-react";
export default function UserMenuDemo() {
return (
<div className="flex min-h-[360px] w-full items-center justify-center bg-background p-10 text-foreground">
<UserMenu
user={{ name: "Jamie Rivera", email: "jamie@acme.co", plan: "Pro" }}
showName
onThemeChange={(theme) => console.log(theme)}
items={[
{
label: "Profile",
icon: <UserRound size={16} />,
onSelect: () => {},
},
{
label: "Settings",
icon: <Settings size={16} />,
keys: ["⌘", ","],
onSelect: () => {},
},
{
label: "Billing",
icon: <CreditCard size={16} />,
onSelect: () => {},
},
]}
onSignOut={() => {}}
/>
</div>
);
}