Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Preferences Dropdown
A React editor preferences dropdown with DropdownMenuCheckboxItem toggles for Auto-save, Spell Check, Line Numbers, Word Wrap, and Minimap
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Editor customization matters—developers and writers need preferences matching their workflow without diving into settings pages. This React preferences dropdown uses shadcn/ui DropdownMenu with Settings icon trigger featuring Auto-save, Spell Check, Line Numbers, Word Wrap, and Minimap toggles using DropdownMenuCheckboxItem and Lucide React. Built with Radix UI primitives and useState managing five preference states. The preferences pattern improves productivity—perfect for code editors, text editors, IDEs, or anywhere editor configuration needs instant access.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Notification Settings
Grouped notification preferences
Profile with Preferences
Quick preference toggles in profile
View Options
Layout and display toggles
Checkbox Dropdown
Basic checkbox menu pattern
Switch Component
Alternative toggle UI
Checkbox Component
Form checkbox input
Questions you might have
React Dropdown Menu - Language Selector
A React language selector dropdown with country flag emojis and language names using DropdownMenuRadioGroup for i18n
React Dropdown Menu - Notification Settings
A React notification settings dropdown with grouped sections for Notification Channels and Notify Me About using DropdownMenuCheckboxItem