{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-theme",
  "title": "Use Theme",
  "type": "registry:hook",
  "files": [
    {
      "path": "packages/registry-react/bootstrap/use-theme/theme-provider.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ThemeProvider as NextThemesProvider } from 'next-themes'\n\n/**\n * Wrap your root layout's <body> with this. next-themes injects a\n * blocking <script> that sets the `dark` class on <html> before first\n * paint, so the initial render matches the saved theme with no white\n * flash on reload — the React/Next equivalent of the Nuxt server plugin\n * in the Vue registry.\n *\n * Use `attribute=\"class\"` + `defaultTheme=\"system\"` to match the\n * `.dark` selector and the `@custom-variant dark` in tailwind.css.\n *\n *   <ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem>\n *     {children}\n *   </ThemeProvider>\n *\n * `disableTransitionOnChange` defaults to true here: a theme flip changes\n * color, background, border and shadow on nearly every element at once, so\n * anything carrying `transition-colors` animates its own repaint and the\n * switch smears instead of snapping. next-themes suppresses transitions for\n * the swap — the same thing the Vue registry's useTheme does by hand. Pass\n * `disableTransitionOnChange={false}` if you deliberately want the crossfade.\n */\nexport function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {\n  return (\n    <NextThemesProvider disableTransitionOnChange {...props}>\n      {children}\n    </NextThemesProvider>\n  )\n}\n",
      "type": "registry:hook",
      "target": "~/components/theme-provider.tsx"
    },
    {
      "path": "packages/registry-react/bootstrap/use-theme/use-theme.ts",
      "content": "// Re-export next-themes' useTheme so consumers have a stable `~/lib/use-theme`\n// import path that mirrors the Vue registry's useTheme composable.\n// Returns { theme, setTheme, resolvedTheme, systemTheme }.\nexport { useTheme } from 'next-themes'\n",
      "type": "registry:hook",
      "target": "~/lib/use-theme.ts"
    }
  ],
  "dependencies": [
    "next-themes"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Theme provider + useTheme hook (next-themes). ThemeProvider injects a blocking script that sets the dark class before first paint (no flash on reload); useTheme reads/sets the active theme. The React/Next equivalent of the Vue useTheme composable."
}