About theme-elements
theme-elements provides six theme-switcher variants for applications using next-themes. Developers can choose among buttons, dropdowns, and toggles, and all variants are hydration-safe by default.
Key features
- 01Six theme-switcher variants
- 02Button, dropdown, and toggle styles
- 03Requires next-themes
- 04Hydration-safe variants
Use cases
- 01Add a theme control to a navbar
- 02Offer theme choices in a settings page
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/theme-elementsin Claude Code to confirm it loaded.
Details
From the project READMETheme 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
Comments
Markdown supported