Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dropdown Menu examples · Settings

Theme Selector Dropdown Menu for React

A theme picker behind a palette button with Light, Dark and System, one of them checked.

Framework
UI library

People expect to pick light, dark, or whatever their system uses. This dropdown menu opens from a palette icon button and lists Light, Dark and System as radio items, each with its sun, moon or monitor icon, under a Theme label. It fits navbars, settings pages and docs sites.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the theme choice stored?

As one value, system to start: light, dark or system. Picking a row stores it and moves the check. DropdownMenuRadioGroup takes value, and onValueChange receives the new value.

Which icon is on each row?

A sun for Light, a moon for Dark and a monitor for System, aria-hidden before the label.

What does the trigger look like?

An outline Button with size="icon-md", a palette icon and aria-label set to Theme. The menu is w-48.

Does picking a row change the document theme?

No. The demo only stores the value. Apply it yourself: toggle the dark class on the root element, and for System follow the prefers-color-scheme media query.

Can I change the theme from the keyboard?

Yes. Open the menu with Enter, Space or Arrow Down, move with the arrow keys or type the first letter, and press Enter to pick. Escape closes the menu.

Is Theme a choice?

No. It's the DropdownMenuLabel that names the group, followed by a separator, and it can't be focused.

All 30 dropdown menu examples