shadcn-theme-menu

Beautiful theme components for shadcn/ui with 24+ color themes, dark/light mode, and animations.

Features

• 24+ pre-made themes – from minimal and elegant to cyberpunk and app-inspired designs
• OKLCH colors – modern color space for perceptually uniform colors and better accessibility
• Drop-in components – ThemeToggle, ThemeDropdown, and CinematicThemeSwitcher with particle effects
• Fully type-safe – complete TypeScript support with exported types
• Customizable – pass your own Button/DropdownMenu components or set themes programmatically
• Persistent – automatic localStorage support for color theme preferences

Installation

# The package includes all required dependencies
pnpm add shadcn-theme-menu

# Peer dependencies (usually already in your project)
pnpm add react react-dom next-themes lucide-react

Quick Start

// 1. Import CSS
import 'shadcn-theme-menu/themes.css';

// 2. Wrap app with ThemeProvider
import { ThemeProvider } from 'shadcn-theme-menu';

<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

// 3. Use components
import { ThemeToggle, ThemeDropdown, CinematicThemeSwitcher } from 'shadcn-theme-menu';

<ThemeToggle />
<ThemeDropdown />
<CinematicThemeSwitcher />

Components

ThemeToggle

Simple light/dark mode toggle.

<ThemeToggle mode="light-dark-system" />
// or
<ThemeToggle mode="light-dark" />

Props:

• mode? - Include system option (default: 'light-dark-system')
• Button? - Custom Button component
• DropdownMenu? - Custom DropdownMenu components
• onThemeChange? - Callback when theme changes

ThemeDropdown

Full dropdown with 24+ color themes and live preview.

<ThemeDropdown
  iconSrc="/custom-icon.svg"
  onColorThemeChange={(theme) => console.log(theme)}
  onModeChange={(mode) => console.log(mode)}
/>

Props:

• iconSrc? - Custom icon path (default: Palette icon)
• Button? - Custom Button component
• DropdownMenu? - Custom DropdownMenu components
• onColorThemeChange? - Callback when color theme changes
• onModeChange? - Callback when light/dark mode changes

CinematicThemeSwitcher

Animated toggle with particle effects.

<CinematicThemeSwitcher />

Available Themes

24 themes: modern-minimal, elegant-luxury, cyberpunk, twitter, mocha-mousse, bubblegum, amethyst-haze, pink-lemonade, notebook, doom-64, catppuccin, graphite, perpetuity, kodama-grove, cosmic-night, tangerine, quantum-rose, nature, bold-tech, amber-minimal, supabase, neo-brutalism, solar-dusk, claymorphism, pastel-dreams

Custom Components

Pass your own Button or DropdownMenu components:

import { Button } from "@/components/ui/button";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

<ThemeDropdown
  Button={Button}
  DropdownMenu={{
    Root: DropdownMenu.Root,
    Trigger: DropdownMenu.Trigger,
    Content: DropdownMenu.Content,
    Item: DropdownMenu.Item,
    Label: DropdownMenu.Label,
    Separator: DropdownMenu.Separator,
  }}
/>;

Programmatic Usage

import { themeNames, themeColors, formatThemeName } from "shadcn-theme-menu";

// Set theme programmatically
const setTheme = (themeName: string) => {
  localStorage.setItem("color-theme", themeName);
  themeNames.forEach((t) =>
    document.documentElement.classList.remove(`theme-${t}`),
  );
  document.documentElement.classList.add(`theme-${themeName}`);
};

// Get theme info
console.log(themeNames); // Array of all theme names
console.log(themeColors["cyberpunk"]); // { primary: '#ff00c8', secondary: '#f0f0ff' }
console.log(formatThemeName("modern-minimal")); // 'Modern Minimal'

TypeScript

Full TypeScript support with exported types:

import type { ThemeProviderProps } from "shadcn-theme-menu";

Demo

Run the interactive demo:

pnpm demo

Or manually:

cd demo
pnpm install
pnpm dev