{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-switcher-toggle", "title": "Theme Switcher Toggle", "description": "Custom toggle theme switcher with sliding animation", "dependencies": [ "next-themes" ], "registryDependencies": [], "files": [ { "path": "registry/default/blocks/theme-switcher/theme-switcher-toggle/components/elements/theme-switcher-toggle.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\ninterface ThemeSwitcherToggleProps\n extends React.HTMLAttributes {\n className?: string;\n}\n\nexport function ThemeSwitcherToggle({\n className,\n ...props\n}: ThemeSwitcherToggleProps) {\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 Toggle theme\n \n {isDark ? (\n \n ) : (\n \n )}\n \n \n
\n );\n}\n", "type": "registry:component" }, { "path": "registry/default/blocks/theme-switcher/theme-switcher-toggle/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-toggle/routes/page.tsx", "content": "\"use client\";\n\nimport { ThemeSwitcherToggle } from \"@/registry/default/blocks/theme-switcher/theme-switcher-toggle/components/elements/theme-switcher-toggle\";\n\nexport default function ThemeSwitcherTogglePage() {\n return (\n
\n
\n
\n
\n

Theme Switcher Toggle

\n

\n A custom toggle theme switcher with sliding animation and smooth\n transitions.\n

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

Features

\n
    \n
  • • Custom built toggle component
    • \n
  • • Smooth sliding animation
    • \n
  • • Sun/moon icon transitions
    • \n
  • • No external dependencies
    • \n
  • • Loading state with skeleton
    • \n
\n
\n
\n
\n
\n );\n}\n", "type": "registry:page", "target": "app/theme-switcher-toggle/page.tsx" } ], "docs": "⚠️ Requires ThemeProvider setup! Wrap your app with and add suppressHydrationWarning to . Custom toggle with sliding animation.", "type": "registry:ui" }