{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-switcher-button", "title": "Theme Switcher Button", "description": "Button-based theme switcher with rotating icons", "dependencies": [ "next-themes" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/default/blocks/theme-switcher/theme-switcher-button/components/elements/theme-switcher-button.tsx", "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { MoonIcon, SunIcon } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"@/components/ui/button\";\n\ninterface ThemeSwitcherButtonProps\n extends React.ButtonHTMLAttributes {\n className?: string;\n}\n\nexport function ThemeSwitcherButton({\n className,\n ...props\n}: ThemeSwitcherButtonProps) {\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 const toggleTheme = () => {\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n };\n\n const isDark = theme === \"dark\";\n\n return (\n \n \n \n Toggle theme\n \n );\n}\n", "type": "registry:component" }, { "path": "registry/default/blocks/theme-switcher/theme-switcher-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-button/routes/page.tsx", "content": "\"use client\";\n\nimport { ThemeSwitcherButton } from \"@/registry/default/blocks/theme-switcher/theme-switcher-button/components/elements/theme-switcher-button\";\n\nexport default function ThemeSwitcherButtonPage() {\n return (\n
\n
\n
\n
\n

Theme Switcher Button

\n

\n A button-based theme switcher with rotating sun/moon icons and\n smooth transitions.\n

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

Features

\n
    \n
  • • Animated sun/moon icon transitions
    • \n
  • • Smooth rotation and scaling effects
    • \n
  • • Loading state with skeleton
    • \n
  • • Accessible with screen reader support
    • \n
  • • Toggle between light and dark themes
    • \n
\n
\n
\n
\n
\n );\n}\n", "type": "registry:page", "target": "app/theme-switcher-button/page.tsx" } ], "docs": "⚠️ Requires ThemeProvider setup! Wrap your app with and add suppressHydrationWarning to . Button-based theme switcher with rotating icons.", "type": "registry:ui" }