Primitive · CLI
Theme Toggle
Segmented light / system / dark control for next-themes. Soft-rect chrome, not a pill.
Preview
npx shadcn@latest add @atroui/theme-toggleInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/theme-toggleSource lands in your repo. Installation · Registry
Usage
Mount ThemeProvider at the root first — without it there is no theme to read or set. Keep one toggle per page: below the
sm breakpoint it collapses to a single icon button that cycles light → system → dark, and the sliding pill above that shares one layout id, so two on screen hand the indicator back and forth. If a naive dark mode hides body copy, use Adaptive Theme Switch.tsx
import { ThemeToggle } from "@/components/ui/theme-toggle"
<ThemeToggle />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Extra classes. Applied to both the mobile button and the desktop pill. |
Theme Toggle