Theme Switcher
A three-way segmented control. The lime pill slides to the active option so the change reads as movement.
NavigationClient componentnext-themeslucide-react
Preview
Light, dark or follow the system.
Installation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/theme-switcherPulls in @duck/theme. Already installed items are skipped.
Usage
import { ThemeSwitcher } from "@/components/ui/theme-switcher"The file lands in components/ui/theme-switcher.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
No props. The component reads everything it needs from context.
Rules
What keeps this component from turning into noise.
- Needs a next-themes ThemeProvider above it with attribute="class".