{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "theme-switcher-dropdown", "title": "Theme Switcher Dropdown", "description": "Dropdown theme switcher with system/light/dark options", "dependencies": [ "next-themes" ], "registryDependencies": [ "button", "dropdown-menu" ], "files": [ { "path": "registry/default/blocks/theme-switcher/theme-switcher-dropdown/components/elements/theme-switcher-dropdown.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 { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\ninterface ThemeSwitcherDropdownProps\n extends React.ButtonHTMLAttributes {\n className?: string;\n}\n\nexport function ThemeSwitcherDropdown({\n className,\n ...props\n}: ThemeSwitcherDropdownProps) {\n const { 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 return (\n \n \n \n \n \n setTheme(\"light\")}>\n \n Light\n \n setTheme(\"dark\")}>\n \n Dark\n \n setTheme(\"system\")}>\n \n System\n \n \n \n );\n}\n", "type": "registry:component" }, { "path": "registry/default/blocks/theme-switcher/theme-switcher-dropdown/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-dropdown/routes/page.tsx", "content": "\"use client\";\n\nimport { ThemeSwitcherDropdown } from \"@/registry/default/blocks/theme-switcher/theme-switcher-dropdown/components/elements/theme-switcher-dropdown\";\n\nexport default function ThemeSwitcherDropdownPage() {\n return (\n
\n
\n
\n
\n

Theme Switcher Dropdown

\n

\n A dropdown theme switcher with system, light, and dark options.\n

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

Features

\n
    \n
  • • Three theme options: System, Light, Dark
    • \n
  • • ShadCN dropdown menu integration
    • \n
  • • Icon indicators for each theme
    • \n
  • • Current theme highlighting
    • \n
  • • Loading state with skeleton
    • \n
\n
\n
\n
\n
\n );\n}\n", "type": "registry:page", "target": "app/theme-switcher-dropdown/page.tsx" } ], "docs": "⚠️ Requires ThemeProvider setup! Wrap your app with and add suppressHydrationWarning to . Dropdown with light/dark/system options.", "type": "registry:ui" }