theme-elements

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".

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

Browse https://tryelements.dev/docs/theme