Every shadcn theme, in one place
Great shadcn themes are scattered everywhere: a gist here, a tweet there, a generator you have to bookmark and lose. There has never been a single place to browse what the community actually built, see it running, and take the one you like.
So we made one. 21st Themes is a gallery of community shadcn themes you can browse, preview live, and ship your own to in a couple of clicks. It is free, and it is built on top of the same theme engine that powers generation across 21st.
A theme is a full token set, not a screenshot
Every theme is stored as a real, complete set of design tokens. The source of truth is CSS with both a :root (light) and a .dark block, and alongside it we keep a pre-parsed copy so cards can render instantly without re-parsing CSS on every scroll.
Each mode carries the full shadcn surface, 25-plus tokens: background and foreground, card, popover, primary, secondary, accent, muted, destructive, border, input, ring, the five chart colors, the whole sidebar set, plus radius, fonts, and shadows. Colors are stored in OKLCH, so gradients between shades stay perceptually even and the palettes look right in both modes. Legacy HSL themes are accepted and converted on the way in, so nothing gets left behind.
Because a theme is data and not an image, everything downstream, the live preview, the color filter, the similarity ranking, works off the same numbers.
Preview it live, in real surfaces
A palette out of context tells you nothing. So every theme renders against real UI, not swatches: a dashboard, an auth screen, forms, a pricing table. A theme wrapper injects the token set as scoped CSS variables, auto-loads any custom Google Fonts the theme calls for, and flips cleanly between light and dark.
Quick-preview opens right on the grid, no navigation: toggle light/dark, arrow through neighboring themes, and hit share to copy a canonical link. What you see in the preview is exactly what you get when you apply it, because it is the same variable injection you would ship.
Ship your own in a couple of clicks
Publishing is one flow. Paste or build your CSS, name it, pick a few tags, and go live. Behind that button, the publish step does the boring-but-important work for you:
- Validates the CSS, parsing it into light and dark token sets and refusing anything that is missing a mode.
- Sanitizes your tags against a curated allowlist (up to five), so the gallery's filters stay meaningful.
- Derives a color bucket from your primary color, so your theme shows up under the right color filter automatically.
- Mints a clean URL slug and stores the parsed tokens, then flips the theme public, all in one atomic step.
There is a gentle rate limit so nobody can flood the gallery, and you keep control after publishing: retag, unpublish, or feature it on your own profile whenever you like.
Finding the one you want
The gallery is filterable the way you actually think about themes:
- Search by name.
- Sort by recommended, popular, or newest.
- Filter by primary color. Every theme's primary hue is mapped into one of eight color buckets (plus neutral) at publish time, so "show me the blue ones" is a single click, not a scroll.
- Filter by tag, or narrow to the themes you made or liked.
Bookmarks double as likes, and the count feeds the popular sort, so the gallery surfaces what the community keeps coming back to.
"Themes like this one"
Open any theme and you get a row of similar ones, and this is more than shared tags. Every theme is reduced to a compact style fingerprint: a short vector capturing primary hue and saturation, background lightness, whether it is fundamentally a light or dark theme, accent character, and corner radius, each dimension weighted so the things your eye notices first count most.
Similarity is just the distance between two fingerprints. Themes below a tuned threshold are "alike"; a light and a dark version of the same hue land far apart, exactly as they should. The whole pool of fingerprints is cached so the row loads instantly, ranked by closeness and broken ties by popularity.
Themes are context for 21st AI
The best part is that a theme is not a dead end. Because it is a structured token set, you can hand one to 21st AI as a palette lock: pick a community theme and every model generates against its exact colors, radius, and fonts. Browse a theme you love, then build your next screen in it. The gallery is not just for looking, it is a starting point.