Shadcn.io is not affiliated with official shadcn/ui
Preferences Dropdown
A React editor preferences dropdown with DropdownMenuCheckboxItem toggles for Auto-save, Spell Check, Line Numbers, Word Wrap, and Minimap
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.
Preferences Dropdown preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.