Shadcn Themes

Overview

Shadcn Themes is a free collection of 641 themes for shadcn/ui and Tailwind CSS v4, defined in OKLCH, alongside a full theme builder. Every theme can be previewed in light and dark mode on real UI, then dropped into a project by copying the CSS or installing it with a single shadcn CLI command. The catalog includes popular palettes such as Claude, Dracula, Nord, Vercel, Tokyo Night, Catppuccin, Supabase and Rosé Pine.

The theme builder starts from any existing theme or a single brand color and shows every change live on dashboards, landing pages and components. It edits every token in light and dark in hex, HSL or OKLCH, sets Google Fonts, radius, spacing and shadows, runs live WCAG contrast checks on every text pair, and exports Tailwind v4 CSS, design tokens or a CLI install. Themes are grouped into collections such as code editor themes, pastel, brutalist, monochrome, warm and accessible, and a set of in-browser tools includes a theme switcher builder that installs several themes with a ready-made picker.

To compare complete shadcn presets (style, colors and fonts together) on real pages, see the sister site Shadcn Preview.

Features

• 641 themes: Free shadcn themes for Tailwind v4 in OKLCH
• Light and dark previews: See every theme on real UI in both modes
• One-command install: Copy the CSS or install with the shadcn CLI
• Theme builder: Edit every token, fonts, radius, spacing and shadows with live previews
• Contrast checks: Live WCAG checks on every text pair
• Exports: Tailwind v4 CSS, design tokens or a CLI install
• Collections: Code editor, pastel, brutalist, monochrome, warm and accessible themes
• Theme switcher builder: Install several themes with a picker, hook and no-flash script