{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-switcher-switch", "title": "Theme Switcher Switch", "description": "Switch-based theme switcher with animated sun/moon icons", "dependencies": [ "next-themes" ], "registryDependencies": [ "switch" ], "files": [ { "path": "registry/default/blocks/theme-switcher/theme-switcher-switch/components/elements/theme-switcher-switch.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 { Switch } from \"@/components/ui/switch\";\n\ninterface ThemeSwitcherSwitchProps\n extends React.HTMLAttributes {\n className?: string;\n}\n\nexport function ThemeSwitcherSwitch({\n className,\n ...props\n}: ThemeSwitcherSwitchProps) {\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 const toggleTheme = () => {\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n };\n\n const isDark = theme === \"dark\";\n\n return (\n \n
\n \n\n \n \n
\n\n \n \n \n \n \n );\n}\n", "type": "registry:component" }, { "path": "registry/default/blocks/theme-switcher/theme-switcher-switch/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-switch/routes/page.tsx", "content": "\"use client\";\n\nimport { ThemeSwitcherSwitch } from \"@/registry/default/blocks/theme-switcher/theme-switcher-switch/components/elements/theme-switcher-switch\";\n\nexport default function ThemeSwitcherSwitchPage() {\n return (\n
\n
\n
\n
\n

Theme Switcher Switch

\n

\n A switch-based theme switcher with animated sun/moon icons that\n slide smoothly.\n

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

Features

\n
    \n
  • • ShadCN switch component integration
    • \n
  • • Animated sun/moon icon transitions
    • \n
  • • Smooth sliding toggle animation
    • \n
  • • Loading state with skeleton
    • \n
  • • Accessible switch behavior
    • \n
\n
\n
\n
\n
\n );\n}\n", "type": "registry:page", "target": "app/theme-switcher-switch/page.tsx" } ], "docs": "⚠️ Requires ThemeProvider setup! Wrap your app with and add suppressHydrationWarning to . Switch-based theme switcher with animated icons.", "type": "registry:ui" }