Components
Loading preview...
The AccountMenu component is a modern, user-friendly dropdown menu designed for managing user account actions and preferences in a web application. It provides a clean interface with icons and labels, allowing users to easily navigate to their dashboard, profile settings, team spaces, and notifications. The menu supports nested submenus, radio groups, and checkbox items, enabling users to select themes, notification preferences, and other personalized settings. With proper alignment of icons and text, and checkmarks positioned on the right, the AccountMenu ensures a visually appealing, intuitive, and responsive experience, making it ideal for dashboards and account management panels.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/account-menu"use client";
import AccountMenu from "@/components/ui/account-menu";
export default function AccountMenuDemo() {
return (
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="mb-6">
<AccountMenu />
</div>
<div className="max-w-md text-center text-slate-500 text-sm">
<p>
This menu demonstrates a professional dropdown design with clear
icon-text spacing, nested submenus, and hover effects. Ideal for
dashboards, team apps, and admin panels.
</p>
</div>
</div>
);
}