Claudeorange
Shadcn Themes
Free shadcn themes and a theme builder for shadcn/ui. Preview in light and dark, then drop any theme into your project with one command.
Popular themes
Favorites from the catalog, ready to install.
Shadcn theme builder
Build your own theme, see it on real UI
Start from any theme or a single brand color, and watch every change land on dashboards, landing pages and components instantly.
- Every token in light and dark, in hex, HSL or OKLCH
- Google Fonts, radius, spacing and shadows
- Live WCAG contrast checks on every text pair
- Generate a full palette from one color, or randomize
- Export Tailwind v4 CSS, design tokens or a CLI install
Browse by collection
Find a starting point by style, color, typography or shape.
Free theme tools
Convert, check and generate themes. Everything runs in your browser.
Theme switcher builderPick 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 converterPaste 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 converterConvert 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 checkerCheck 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 themeUpload 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 themesPreview two shadcn/ui themes next to each other on the same components, in light or dark mode, and see exactly which tokens differ.
Install in one command
Every theme is a shadcn registry item. Install by URL, or add the @shadcnthemes registry once and install by name, from your terminal or your AI coding assistant.
npx shadcn@latest add https://shadcnthemes.com/r/claude.jsonnpx shadcn@latest add @shadcnthemes/dracula