Theming guides
Everything you need to customize shadcn/ui with Tailwind CSS v4, from your first theme to multi-theme apps.
- How to theme shadcn/ui with Tailwind CSS v4A complete guide to shadcn/ui theming in Tailwind v4: the CSS variables, the :root and .dark blocks, @theme inline, radius, fonts, shadows and installing a theme with the CLI.
- OKLCH colors in shadcn/ui, explainedWhy shadcn/ui and Tailwind v4 switched from HSL to OKLCH, how to read oklch(L C H) values, and practical tips for picking palettes that look consistent in light and dark mode.
- Add dark mode to shadcn/ui in Next.jsSet up light, dark and system themes for shadcn/ui in a Next.js App Router project with next-themes, avoid the flash of the wrong theme, and build a mode toggle.
- Migrate a shadcn/ui theme from Tailwind v3 to v4Convert a Tailwind v3 shadcn/ui theme (HSL channels in globals.css plus tailwind.config.js) to Tailwind v4's OKLCH variables and @theme inline, step by step.
- Add custom colors to shadcn/ui (success, warning, info)Extend a shadcn/ui theme with your own semantic tokens such as success, warning and info, in light and dark mode, and use them in Tailwind utilities and component variants.
- Build a multi-theme switcher for shadcn/uiLet users choose between several color themes, each with light and dark mode, using scoped CSS variables, a data-theme attribute and next-themes in Next.js.
- Using custom fonts in shadcn/ui (Next.js and Vite)Load Google Fonts for a shadcn/ui theme with next/font or a stylesheet, wire them to --font-sans, --font-serif and --font-mono, and avoid the most common font override bug.
- shadcn/ui chart and sidebar colors explainedHow the chart-1 to chart-5 and sidebar-* tokens work in shadcn/ui, how charts pick up theme colors, and how to choose accessible series colors for light and dark mode.
- Install shadcn/ui themes by name (and from AI assistants)Add the @shadcnthemes registry to components.json to install any theme with npx shadcn add @shadcnthemes/<name>, and let AI coding assistants browse and apply themes through the shadcn MCP server.