// Install theme switcher components from the Elements registry. Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns. Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle".
| name | theme-elements |
| description | Install theme switcher components from the Elements registry. Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns. Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle". |
6 theme switcher variants. Requires next-themes (auto-installed).
npx shadcn@latest add @elements/theme-switcher-{variant}
| 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 |
# 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
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.
Browse and install components from the Elements registry (tryelements.dev). Use when user asks about available components, wants to explore providers, says "elements", "component library", "what components", "install from registry", "tryelements", or needs to find the right component category.
Install CC0 sound effects from the Elements registry. Use when user needs UI sounds (click, pop, notification), transition sounds (whoosh, swoosh), cinematic sounds (boom, riser, glitch), or audio for video production. Triggers on "sound effect", "SFX", "audio", "notification sound", "click sound", "whoosh", "UI sound", "sound for video", "play sound", "useSound".
Install Polar monetization components from the Elements registry. Use when user needs pricing cards, sponsor grids, subscription badges, revenue displays, or license key inputs. Triggers on "polar", "monetization", "pricing card", "subscription badge", "sponsor grid", "license key", "revenue card", "sponsorship", "pricing page".
Install Upstash serverless components from the Elements registry. Use when user needs rate limit displays, Redis counters, leaderboards, queue status cards, or cache badges. Triggers on "upstash", "rate limit", "redis counter", "leaderboard component", "queue card", "cache badge", "serverless redis".
Install developer tool components from the Elements registry. Use when user needs JSON viewers, API response displays, code diff viewers, CLI output renderers, env editors, error boundaries, webhook testers, or schema viewers. Triggers on "devtools", "json viewer", "API response", "webhook tester", "env editor", "code diff", "schema viewer", "error boundary", "CLI output".
Install GitHub display components from the Elements registry. Use when user needs GitHub repo cards, profile cards, contribution calendars, star counters, language breakdowns, or activity displays. Triggers on "github component", "github card", "repo card", "contributions calendar", "github stars", "github profile", "github activity", "github languages", "star button".