Theme Switcher Elements
6 theme switcher variants. Requires next-themes (auto-installed).
Install Pattern
npx shadcn@latest add @elements/theme-switcher-{variant}
Variants
Variant Install Description
Button @elements/theme-switcher-button
Simple icon button
Classic @elements/theme-switcher-classic
Classic toggle with label
Dropdown @elements/theme-switcher-dropdown
Dropdown menu with options
Multi-Button @elements/theme-switcher-multi-button
Button group (Light/Dark/System)
Switch @elements/theme-switcher-switch
Toggle switch
Toggle @elements/theme-switcher-toggle
Animated toggle
Quick Patterns
Minimal (navbar icon)
npx shadcn@latest add @elements/theme-switcher-button
Full control
npx shadcn@latest add @elements/theme-switcher-dropdown
Settings page
npx shadcn@latest add @elements/theme-switcher-multi-button
Setup
Requires ThemeProvider from next-themes wrapping your app in the root layout:
import { ThemeProvider } from "next-themes";
export default function Layout({ children }) { return ( <ThemeProvider attribute="class" defaultTheme="system" enableSystem> {children} </ThemeProvider> ); }
All variants are hydration-safe by default.
Discovery