{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-switcher-multi-button", "title": "Theme Switcher Multi Button", "description": "Multi-button theme switcher with system/light/dark options", "dependencies": [ "next-themes" ], "registryDependencies": [], "files": [ { "path": "registry/default/blocks/theme-switcher/theme-switcher-multi-button/components/elements/theme-switcher-multi-button.tsx", "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { MonitorIcon, MoonIcon, SunIcon } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface ThemeSwitcherMultiButtonProps\n extends React.HTMLAttributes {\n className?: string;\n}\n\nexport function ThemeSwitcherMultiButton({\n className,\n ...props\n}: ThemeSwitcherMultiButtonProps) {\n const { theme, setTheme } = useTheme();\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n if (!mounted) {\n return (\n \n
\n
\n
\n
\n
\n
\n );\n }\n\n const themes = [\n { value: \"system\", icon: MonitorIcon, label: \"Switch to system theme\" },\n { value: \"light\", icon: SunIcon, label: \"Switch to light theme\" },\n { value: \"dark\", icon: MoonIcon, label: \"Switch to dark theme\" },\n ];\n\n return (\n \n {themes.map(({ value, icon: Icon, label }) => (\n setTheme(value)}\n className=\"group relative size-6 rounded-full transition duration-200 ease-out\"\n >\n {theme === value && (\n
\n )}\n \n \n ))}\n
\n );\n}\n", "type": "registry:component" }, { "path": "registry/default/blocks/theme-switcher/theme-switcher-multi-button/routes/layout.tsx", "content": "import { Geist, Geist_Mono } from \"next/font/google\";\n\nimport { ThemeProvider } from \"next-themes\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n", "type": "registry:page", "target": "app/layout.tsx" }, { "path": "registry/default/blocks/theme-switcher/theme-switcher-multi-button/routes/page.tsx", "content": "\"use client\";\n\nimport { ThemeSwitcherMultiButton } from \"@/registry/default/blocks/theme-switcher/theme-switcher-multi-button/components/elements/theme-switcher-multi-button\";\n\nexport default function ThemeSwitcherMultiButtonPage() {\n return (\n
\n
\n
\n
\n

Theme Switcher Multi Button

\n

\n A multi-button theme switcher with system, light, and dark options\n in a button group.\n

\n
\n\n
\n \n
\n\n
\n

Features

\n
    \n
  • • Three theme buttons: System, Light, Dark
    • \n
  • • Visual active state indication
    • \n
  • • Icon representation for each theme
    • \n
  • • Button group layout
    • \n
  • • Loading state with skeleton
    • \n
\n
\n
\n
\n
\n );\n}\n", "type": "registry:page", "target": "app/theme-switcher-multi-button/page.tsx" } ], "docs": "⚠️ Requires ThemeProvider setup! Wrap your app with and add suppressHydrationWarning to . Multi-button with system/light/dark options.", "type": "registry:ui" }