Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Profile with Preferences
A React profile dropdown with DropdownMenuCheckboxItem toggles for Email Notifications, Push Notifications, and Auto-save preferences
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Quick settings toggles save clicks—users adjust preferences without navigating to settings pages. This React profile dropdown adds DropdownMenuCheckboxItem components below standard Profile and Settings options using shadcn/ui and Lucide React featuring Email Notifications, Push Notifications, and Auto-save with useState managing checked state. Built with Radix UI primitives and onCheckedChange handlers. The quick preferences pattern improves efficiency—perfect for productivity apps, dashboards, communication tools, or anywhere frequently-adjusted settings need instant access.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Profile Dropdown
Simple profile menu without preferences
Profile with Status
Enhanced profile with badges
Account Settings
Grouped settings sections
Checkbox Dropdown
Basic checkbox menu pattern
Switch Component
Alternative toggle UI
Checkbox Component
Form checkbox input
Questions you might have
React Dropdown Menu - Multi-Account Switcher
A React multi-account switcher dropdown showing current account with ChevronsUpDown icon and list of accounts with Check indicator
React Dropdown Menu - Theme Selector
A React theme selector dropdown with Light, Dark, and System options using DropdownMenuRadioGroup and theme icons