Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Notification Settings
A React notification settings dropdown with grouped sections for Notification Channels and Notify Me About using DropdownMenuCheckboxItem
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Notification fatigue is real—users need granular control over what alerts them and how. This React notification settings dropdown uses shadcn/ui DropdownMenu with Bell icon trigger featuring grouped sections for Channels (Email, Push, SMS) and Events (Comments, Mentions, Product Updates) using DropdownMenuGroup and DropdownMenuCheckboxItem from Lucide React. Built with Radix UI primitives and useState managing six notification states. The notification settings pattern reduces overwhelm—perfect for collaboration tools, social apps, project management platforms, or anywhere user attention needs respectful management.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Preferences Dropdown
Editor preference toggles
Profile with Preferences
Quick preference checkboxes
Account Settings
Grouped settings sections
Grouped Dropdown
Basic grouped menu pattern
Checkbox Dropdown
Checkbox menu pattern
Switch Component
Alternative toggle UI
Questions you might have
React Dropdown Menu - Preferences Dropdown
A React editor preferences dropdown with DropdownMenuCheckboxItem toggles for Auto-save, Spell Check, Line Numbers, Word Wrap, and Minimap
React Dropdown Menu - View Options
A React view options dropdown combining DropdownMenuRadioGroup for layout selection and DropdownMenuCheckboxItem for display toggles