# shadcnthemes > Free themes for shadcn/ui and Tailwind CSS v4 (OKLCH), with a theme editor and theming tools. Every theme has light and dark palettes and installs with the shadcn CLI. ## Installing a theme Every theme is a shadcn registry item. Install with the shadcn CLI: npx shadcn@latest add https://shadcnthemes.com/r/.json Or register the namespace once in components.json: { "registries": { "@shadcnthemes": "https://shadcnthemes.com/r/{name}.json" } } then: npx shadcn@latest add @shadcnthemes/ Add success / warning / info tokens with https://shadcnthemes.com/r/.extended.json. The full registry index is at https://shadcnthemes.com/r/registry.json. ## Guides - [How to theme shadcn/ui with Tailwind CSS v4](https://shadcnthemes.com/guides/how-to-theme-shadcn-ui): A 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, explained](https://shadcnthemes.com/guides/shadcn-oklch-colors): Why 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.js](https://shadcnthemes.com/guides/shadcn-dark-mode-nextjs): Set 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 v4](https://shadcnthemes.com/guides/migrate-shadcn-theme-tailwind-v4): Convert 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)](https://shadcnthemes.com/guides/shadcn-custom-colors): 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/ui](https://shadcnthemes.com/guides/shadcn-theme-switcher): Let 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)](https://shadcnthemes.com/guides/shadcn-fonts): 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 explained](https://shadcnthemes.com/guides/shadcn-chart-and-sidebar-colors): How 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)](https://shadcnthemes.com/guides/shadcn-themes-ai-assistants): Add the @shadcnthemes registry to components.json to install any theme with npx shadcn add @shadcnthemes/, and let AI coding assistants browse and apply themes through the shadcn MCP server. ## Tools - [Theme switcher builder](https://shadcnthemes.com/tools/theme-switcher-builder): Pick several shadcn/ui themes and install them all at once, with a ready-made theme picker, a hook and a no-flash script, using a single shadcn CLI command. - [Tailwind v3 → v4 theme converter](https://shadcnthemes.com/tools/tailwind-v4-theme-converter): Paste a Tailwind v3 shadcn/ui globals.css with HSL variables and get Tailwind v4 CSS with OKLCH colors, @theme inline mappings and chart and sidebar tokens. - [OKLCH color converter](https://shadcnthemes.com/tools/oklch-color-converter): Convert hex, HSL and RGB colors to OKLCH, and back, for Tailwind v4 and shadcn/ui. Convert one color or a whole list of CSS variables at once. - [Theme contrast checker](https://shadcnthemes.com/tools/contrast-checker): Check every text color in a shadcn/ui theme against WCAG 2 contrast in light and dark mode, then fix failing pairs automatically while keeping your theme's colors. - [Image to theme](https://shadcnthemes.com/tools/image-to-theme): Upload a logo, screenshot or photo and get a complete shadcn/ui theme built from its colors, with accessible light and dark palettes, ready to export. - [Compare themes](https://shadcnthemes.com/tools/compare-themes): Preview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ. - [Color scale generator](https://shadcnthemes.com/tools/color-scale-generator): Generate a Tailwind-style 50–950 color scale in OKLCH from any brand color, and copy it as Tailwind v4 @theme variables for use alongside your shadcn/ui theme. ## Collections - [Blue shadcn/ui themes](https://shadcnthemes.com/collections/blue): 159 themes - [Purple shadcn/ui themes](https://shadcnthemes.com/collections/purple): 70 themes - [Green shadcn/ui themes](https://shadcnthemes.com/collections/green): 82 themes - [Teal shadcn/ui themes](https://shadcnthemes.com/collections/teal): 31 themes - [Red shadcn/ui themes](https://shadcnthemes.com/collections/red): 70 themes - [Orange shadcn/ui themes](https://shadcnthemes.com/collections/orange): 54 themes - [Yellow shadcn/ui themes](https://shadcnthemes.com/collections/yellow): 24 themes - [Pink shadcn/ui themes](https://shadcnthemes.com/collections/pink): 25 themes - [Neutral shadcn/ui themes](https://shadcnthemes.com/collections/neutral): 126 themes - [Minimal shadcn/ui themes](https://shadcnthemes.com/collections/minimal): 239 themes - [Monochrome & black-and-white shadcn/ui themes](https://shadcnthemes.com/collections/monochrome): 98 themes - [Pastel shadcn/ui themes](https://shadcnthemes.com/collections/pastel): 37 themes - [Vibrant & bold shadcn/ui themes](https://shadcnthemes.com/collections/vibrant): 166 themes - [Neo-brutalist shadcn/ui themes](https://shadcnthemes.com/collections/brutalist): 9 themes - [Warm shadcn/ui themes](https://shadcnthemes.com/collections/warm): 61 themes - [Cool-toned shadcn/ui themes](https://shadcnthemes.com/collections/cool): 36 themes - [High-contrast shadcn/ui themes](https://shadcnthemes.com/collections/high-contrast): 214 themes - [Accessible shadcn/ui themes (WCAG AA)](https://shadcnthemes.com/collections/accessible): 63 themes - [Code editor themes for shadcn/ui](https://shadcnthemes.com/collections/editor-themes): 19 themes - [Dark shadcn/ui themes](https://shadcnthemes.com/collections/dark): 641 themes - [Sharp-cornered shadcn/ui themes](https://shadcnthemes.com/collections/sharp): 69 themes - [Rounded shadcn/ui themes](https://shadcnthemes.com/collections/rounded): 471 themes - [Extra-rounded & pill shadcn/ui themes](https://shadcnthemes.com/collections/pill): 101 themes - [Serif shadcn/ui themes](https://shadcnthemes.com/collections/serif): 7 themes - [Monospace shadcn/ui themes](https://shadcnthemes.com/collections/monospace): 10 themes - [shadcn/ui themes using Inter](https://shadcnthemes.com/collections/font-inter): 122 themes - [shadcn/ui themes using Geist](https://shadcnthemes.com/collections/font-geist): 31 themes - [shadcn/ui themes using Outfit](https://shadcnthemes.com/collections/font-outfit): 27 themes - [shadcn/ui themes using Plus Jakarta Sans](https://shadcnthemes.com/collections/font-plus-jakarta-sans): 17 themes - [shadcn/ui themes using Montserrat](https://shadcnthemes.com/collections/font-montserrat): 15 themes - [shadcn/ui themes using DM Sans](https://shadcnthemes.com/collections/font-dm-sans): 15 themes - [shadcn/ui themes using Poppins](https://shadcnthemes.com/collections/font-poppins): 14 themes - [shadcn/ui themes using Open Sans](https://shadcnthemes.com/collections/font-open-sans): 11 themes ## Optional - [Full theme catalog](https://shadcnthemes.com/llms-full.txt): every theme with its colors, fonts and install command - [Shadcn theme builder](https://shadcnthemes.com/theme-builder)