Theme Toggle

A control for switching between light, dark and system colour themes.

$bunx shadcn@latest add @nx-ui/theme-toggle
Registry item
Installs withbuttondropdown-menuutils
Used bysite-footeruser-menu

Cycle variant

A single icon button that cycles light → dark → system on each click — no menu, for tighter spaces like a compact toolbar.

Disabled

Props not covered by `variant` pass straight through to the underlying Button, so disabled works on either variant.

ThemeToggleMenuItems standalone

The light/dark/system radio group, exported separately so it can be embedded inside another menu (e.g. a user or settings menu). Must be rendered within a DropdownMenuContent.

In a settings menu

A realistic composition: the theme control sits at the bottom of a project's settings menu, below the org-specific actions.

API reference

Exported parts and their props, extracted from the component source.

PropTypeDefaultDescription
variant"menu" | "cycle""menu"—

…extends Omit<React.ComponentProps<typeof Button>, "children" | "var…