Design Systems Today
57 themes · shadcn/ui CSS-variable schema

Shadcn themes that don’t look like every other shadcn app

57 hand-tuned themes, each authored as the exact CSS-variable schema shadcn/ui reads. Paste one :root block into your globals.css and every component re-skins — light and dark. Preview all 57 live before you pay.

  • Full shadcn token block per theme
  • Hand-tuned dark mode included
  • tokens.json + Tailwind v4 preset
  • System prompt for Claude / Cursor / v0

The exact variables shadcn/ui expects

No mapping layer, no rename pass. Every theme ships its tokens under the variable names shadcn/ui components already consume — drop it in and bg-primary, text-muted-foreground and friends just work.

  • --background
  • --foreground
  • --card
  • --card-foreground
  • --primary
  • --primary-foreground
  • --secondary
  • --secondary-foreground
  • --muted
  • --muted-foreground
  • --accent
  • --accent-foreground
  • --border
  • --ring
  • --destructive
  • --destructive-foreground
  • --chart-1 … --chart-5
  • --radius
theme.css — Vercel (shipped as-is)
:root {
  --background: #000000;
  --foreground: #ededed;
  --primary: #ffffff;
  --accent: #1a1a1a;
  --radius: 0.5rem;
  /* + card, secondary, muted, border,
     ring, destructive, chart-1…5 */
}

.dark {
  /* full hand-tuned dark override */
}

All 57 shadcn themes — preview every one live

No mockups, no signup. Open any theme’s live preview and see the palette, type, and components before you spend a cent.

Questions

Do these actually work with shadcn/ui?

Yes. Every theme is authored as the exact CSS-variable schema shadcn/ui reads: --background, --foreground, --card, --primary, --primary-foreground, --secondary, --muted, --accent, --border, --ring, --destructive, --chart-1 through --chart-5, and --radius. Paste the :root block into your globals.css and every shadcn component re-skins instantly.

Is dark mode included?

Yes. Each theme ships a hand-tuned .dark override block alongside the light :root block — not an auto-inverted palette.

What exactly is in the download?

Per theme: the full CSS token block (shadcn/ui variable schema), tokens.json (structured design tokens for Figma/Tokens Studio or your own pipeline), tailwind.preset.css (Tailwind v4 @theme block), a tuned AI-coder system prompt for Claude/Cursor/v0, a style guide, and reference screenshots.

Are these full page templates?

No — this product is the themes themselves: tokens, presets, and prompts that restyle your existing shadcn/ui project. If you want ready-built pages, we sell those separately as landing, dashboard, and portfolio template packs.

Can I use them in commercial and client projects?

Yes — unlimited commercial use, no attribution required. One-time purchase, no subscription, 12 months of updates.

57 shadcn themes. $69. Once.

Or get every product line across all themes — templates included — in the $199 Everything Bundle.

See the Everything Bundle