Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dropdown Menu - Theme Selector
A React theme selector dropdown with Light, Dark, and System options using DropdownMenuRadioGroup and theme icons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Dark mode isn't optional anymore—users expect theme control matching their system or preference. This React theme selector dropdown uses shadcn/ui DropdownMenu with Palette icon trigger featuring Light (Sun), Dark (Moon), and System (Monitor) options from Lucide React. Built with Radix UI DropdownMenuRadioGroup and useState managing theme state. The theme selector pattern improves accessibility—perfect for dashboards, documentation sites, SaaS apps, or anywhere users need consistent visual comfort across lighting conditions.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
View Options
Layout and display settings dropdown
Preferences Dropdown
Editor preference toggles
Profile with Preferences
User preference checkboxes
Radio Group Dropdown
Single selection menu pattern
Button Component
Theme toggle button
Select Component
Alternative theme selection
Questions you might have
React Dropdown Menu - Profile with Preferences
A React profile dropdown with DropdownMenuCheckboxItem toggles for Email Notifications, Push Notifications, and Auto-save preferences
React Dropdown Menu - Language Selector
A React language selector dropdown with country flag emojis and language names using DropdownMenuRadioGroup for i18n