{"content":"# Shadcn UI & Theming\n\nAdd Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.\n\n### Step 1: Initialize Shadcn\n\n```bash\nbunx --bun shadcn@latest init --base radix\n```\n\nFollow the prompts to configure your project. The CLI will create a `components.json` config file and set up your CSS variables in `globals.css`.\n\n### Step 2: Add components\n\nInstall all components:\n\n```bash\nbunx --bun shadcn@latest add --all --yes\n```\n\nNote: Shadcn is highly configurable. Omit `--yes` and follow the setup wizard to configure Shadcn to your liking.\n\n### Step 3: Add dark mode\n\nInstall the theme provider:\n\n```bash\nbun add next-themes\n```\n\nCreate the theme provider component:\n\n```tsx\n// src/components/themes/provider.tsx\n\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\n\nexport function ThemeProvider({\n children,\n ...props\n}: React.ComponentProps) {\n return {children};\n}\n```\n\nWrap your app with the provider in your layout:\n\n```tsx\n// src/app/layout.tsx\nimport { ThemeProvider } from \"@/components/themes/provider\";\nimport { Toaster } from \"@/components/ui/sonner\";\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n {children}\n \n \n \n \n );\n}\n```\n\nCreate the theme selector component to toggle between light, dark, and system themes:\n\n```tsx\n// src/components/themes/selector.tsx\n\"use client\";\n\nimport { Moon, Sun } 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\nexport function ThemeSelector() {\n const { setTheme } = useTheme();\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>\n Light\n \n setTheme(\"dark\")}>\n Dark\n \n setTheme(\"system\")}>\n System\n \n \n \n );\n}\n```\n\n---\n\n## References\n\n- [Shadcn Next.js Installation](https://ui.shadcn.com/docs/installation/next)\n- [Shadcn Dark Mode Guide](https://ui.shadcn.com/docs/dark-mode/next)"}