A shadcn theme is not a skin. It is a set of CSS variables - background, foreground, primary, muted, border, ring, plus the chart and sidebar tokens - and every component in the ecosystem reads from them. That is why swapping a theme changes a whole application in one file, and also why a badly built theme breaks in places you did not expect.
There are 623 public themes in the community collection, all free. This is how to pick one, what to check before shipping it, and how to make your own.
The ones people take most
The most-saved themes fall into three groups, and the split says something about what people are actually building.
Brand-derived: Vercel, Supabase, Twitter, Claude and Claude Amber, T3 Chat. Not for imitating those products, but because their palettes are already proven for developer-facing interfaces: high contrast, restrained accents, a neutral that is not pure grey.
Editorial and calm: Modern Minimal, Zen Linen, Sage Garden, Elegant Luxury. Softer neutrals with a hue bias, which is the difference between a page that looks designed and one that looks default.
Editor palettes: Catppuccin and its relatives, which arrive with the advantage of years of contrast tuning across hundreds of syntax colours.
What to check before shipping one
A theme that looks right in a preview can still be wrong in an application. Four checks, in the order they bite.
Both modes, not one. Every theme carries a light and a dark set. Designers tune one and generate the other, and the generated half is where washed-out borders and unreadable muted text live. Look at the dark set specifically on: muted foreground on muted background, borders against cards, and disabled controls.
The ring. --ring is the focus indicator, and it is the token most often left at a default that has no contrast against the background it appears on. A theme with an invisible focus ring is an accessibility failure applied to every interactive element at once.
Muted foreground contrast. --muted-foreground on --background is where most themes fail 4.5:1. It is used for secondary text everywhere - table headers, timestamps, helper text - so failing it once fails it in a hundred places.
Charts and sidebar. The chart tokens are the ones nobody previews, and a theme whose five chart colours are indistinguishable in greyscale will produce an unreadable dashboard.
Installing one
A theme is CSS variables, so applying it is replacing a block in your global stylesheet: the :root set for light and the .dark set for dark. Copy, paste, reload.
Two notes. Tailwind v4 moved theme configuration into CSS with @theme, so a theme written for v3's JavaScript config needs translating rather than pasting. And if your project already overrides a token somewhere deeper in the cascade, that override wins, which is the usual reason a pasted theme "does not work".
Making your own
The fastest honest route is to start from a theme that is close and change the hue, rather than picking eleven colours from scratch.
If you are building from nothing, work in OKLCH. It is perceptually uniform, so holding lightness and chroma constant while rotating hue produces a set that feels related, which is exactly what a token system needs. The gradient guide covers why that colour space behaves differently, and the same reasoning applies to a palette.
Two rules that save a rebuild. Derive the neutrals from the accent - a grey with a slight hue bias toward your primary reads as chosen, a pure grey reads as unconsidered. And set the foreground tokens from the contrast requirement rather than from taste: pick the background, then pick the darkest text colour that still fits the palette, not the other way round.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui themes | The official base palettes, guaranteed to fit | A small set, deliberately neutral |
| tweakcn | Editing tokens visually and previewing on real components | A tool, not a collection |
| Community themes on 21st | 623 free themes with both modes and a live preview | Community-made, so run the four checks above |
| OKLCH pickers | Building a palette from scratch in a uniform space | You are choosing every value |
Taking one
Open any theme, copy the variables, paste them into your global stylesheet. Nothing to install and no dependency to carry, because the whole thing is CSS custom properties. The 21st MCP can do the same from the editor: ask Claude, Cursor or Codex for a theme, get the palettes inline, and let the agent write the block.
Frequently asked
- Where can I find free shadcn themes?
- The community collection on 21st holds 623 public themes, all free, each with a light and a dark set and a live preview. shadcn/ui ships its own base palettes, and tweakcn is the tool for editing tokens visually. A theme is only CSS variables, so taking one is a copy and paste with nothing to install.
- What should I check before using a shadcn theme?
- Four things. Both modes, since designers usually tune one and generate the other. The ring token, because an invisible focus indicator is an accessibility failure applied to every control at once. Muted foreground contrast on the background, which is where most themes fail 4.5:1. And the chart and sidebar tokens, which nobody previews.
- How do you install a shadcn theme?
- Replace the token block in your global stylesheet: the :root set for light and the .dark set for dark. Two caveats: Tailwind v4 moved theme configuration into CSS with @theme, so a v3-era theme needs translating rather than pasting, and any deeper override already in your cascade will win over the pasted values.
- How do you build a theme from scratch?
- Start from a theme that is close and rotate the hue rather than choosing eleven colours cold. Work in OKLCH, where holding lightness and chroma while rotating hue produces a set that feels related. Derive the neutrals from the accent so the greys read as chosen, and pick foreground colours from the contrast requirement rather than from taste.