Shadcn Dropdown Menu Theme & Status
User profile dropdown menu with theme toggle and status selector. Built by composing Avatar, Badge, Button, Dropdown Menu, Tabs. Uses cn alongside the shadcn primitives. A free, open source shadcn dropdown menu example you can install with npx shadcn@latest add @reui/c-dropdown-menu-14 and edit as your own code.
User profile dropdown menu with theme toggle and status selector
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: An account popover with an icon Tabs theme switch, count badges and a presence status flyout with colored dots
When to use
- Action and overflow menus on a button or a dots icon, such as edit, duplicate, share, export and delete
- Account, workspace and create menus showing the signed in user, workspace switching and sign out
- Toggles, exclusive choices and short lists, such as panel layout, theme, AI models or recent alerts
When not to use
- A plain account list with an email header and no theme or status controls: use the Dropdown Menu User Profile example
- Actions opened by right clicking or long pressing a surface, with no button to press: use the Context Menu component
- A whole top bar with search, alerts, switchers and the user dropdown already placed: use the Navbar blocks
- The account settings page an avatar link opens, with identity, team and billing forms: use the Profile blocks
Agent notes
themeonly drives theTabshere; pass it to your theme provider so light, dark and system take effectonSelectwithpreventDefaultkeeps the popup open on radix only; on the base twin set closeOnClick to false instead- Each theme
TabsTriggerholds only an icon, so give it an accessible name such as Light, Dark or System DropdownMenuLabelthrows on the base twin unless it sits inside aDropdownMenuGrouporDropdownMenuRadioGroup- On the base twin run an item's action from
onClick;onSelectis a Radix item event that Base UI never fires - Pass the trigger element through
renderon the base twin and as theasChildchild on radix; the prop meant for the other twin does nothing
https://reui.io/components/dropdown-menu/c-dropdown-menu-14.mdget_example("c-dropdown-menu-14")npx shadcn@latest add @reui/c-dropdown-menu-14Shadcn Components in Dropdown Menu Theme & Status
Dependencies
- cn
About Shadcn Dropdown Menu Theme & Status
User profile dropdown menu with theme toggle and status selector. Built by composing Avatar, Badge, Button, Dropdown Menu, Tabs. Uses cn alongside the shadcn primitives. A free, open source shadcn dropdown menu example you can install with npx shadcn@latest add @reui/c-dropdown-menu-14 and edit as your own code.
What You Can Build With Shadcn Dropdown Menu Theme & Status
- Composes Avatar, Badge, Button, Dropdown Menu, Tabs, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-dropdown-menu-14
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Dropdown Menu Examples
- Basic Basic dropdown menu
- Opening Positions Dropdown menus opening positions
- Icons Dropdown menu with icons
- Keyboard Shortcuts Dropdown menu with keyboard shortcuts
- Nested Submenus Dropdown menu with nested submenus
- Checkboxes Dropdown menu with checkboxes
- Radio Groups Dropdown menu with radio groups
- All Item Types Advance dropdown menu
- User Profile User profile dropdown menu
- Workspace Switcher Workspace switcher dropdown menu
- Notification Feed Notifications dropdown menu
- Record Actions Actions dropdown menu
Related Shadcn Component Categories
Open-source shadcn emoji picker components for message composers, reactions, page icons, statuses, and custom team emoji.
Open-source shadcn empty state components for zero-data screens, first-run onboarding, and guided next steps.
Open-source shadcn event calendar components with month, week, day and agenda views, and drag-and-drop scheduling.
Open-source shadcn form field components for form composition, validated inputs, and helper text.
Open-source shadcn file type icon components for file extensions, export formats, and file browsers.
Open-source shadcn file upload components for drag-and-drop uploads, multi-file flows, and upload progress.
Frequently Asked Questions
When should I use Shadcn Dropdown Menu Theme & Status?
Use it for an account popover with an icon Tabs theme switch, count badges and a presence status flyout with colored dots.
Shadcn Dropdown Menu as a whole fits:
- Action and overflow menus on a button or a dots icon, such as edit, duplicate, share, export and delete
- Account, workspace and create menus showing the signed in user, workspace switching and sign out
- Toggles, exclusive choices and short lists, such as panel layout, theme, AI models or recent alerts
For a plain account list with an email header and no theme or status controls, use the Dropdown Menu User Profile example. For actions opened by right clicking or long pressing a surface, with no button to press, use the Context Menu component. For a whole top bar with search, alerts, switchers and the user dropdown already placed, use the Navbar blocks. For the account settings page an avatar link opens, with identity, team and billing forms, use the Profile blocks.
How do I install Shadcn Dropdown Menu Theme & Status?
Is Shadcn Dropdown Menu Theme & Status free to use?
Which components does Shadcn Dropdown Menu Theme & Status use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.