Shadcn Themes - 14+ Free & Premium Themes for Shadcn UI

Browse free popular shadcn/ui themes built on official CSS variables. Apply any theme to 1,837 blocks, 2,093 components, and 49 pages—with light & dark mode, display and body fonts, and one-line CLI install.

How Shadcn Themes work with our library

Themes include all the shadcn/ui CSS variables and are installed via the shadcn CLI. Swap a theme once and every block, component, and page picks up the new look.

Instant Theming

One theme, every block

Our themes instantly apply to all 1,837 blocks, 2,093 components, and 49 pages in the library. Choose, swap and install a theme in seconds.

Defaultapplied

Navbar

Hero

Feature

Pricing

CTA

FAQ

Shadcn CLI

Install in one command

Add any theme with the shadcn CLI. CSS variables land in your globals.css, ready for Tailwind 4.

$ npx shadcn@latest add @shadcnblocks/theme/vercel
✓ Updated CSS variables
✓ Light & dark modes ready
✓ Fonts via --font-display

Typography

Display & body fonts

Our themes add --font-display and --font-text so you can pair different sans or serif faces for headings and body—something default shadcn and Tailwind fonts don’t allow, since you only get one sans, one serif, and one mono.

--font-display

Heading type

--font-text

Body copy stays proportional and readable across every block.

Modes

Light and dark built in

Themes define :root and .dark tokens. Toggle dark mode on any theme detail page or in the block toolbar—both modes stay in sync.

CSS variables

Official shadcn tokens

Primary, muted, sidebar, chart, radius, and shadow tokens match the shadcn/ui theme contract—compatible with Tweakcn, StyleGlide, Tinte, and official themes.

--primary--secondary--accent--muted--destructive--border--sidebar--chart-1--radius--shadow
--shadow--radius--chart-1--sidebar--border--destructive--muted--accent--secondary--primary

Integrations

Works with the major theme tools

Themes follow the official shadcn/ui CSS variable contract, so they drop straight into Tweakcn, StyleGlide, Tinte, and other theme builders—edit there, install here, or the other way around.

Shadcnblocksshadcn/uiTweakcnStyleGlideTinte

Themes + library access

Style everything.Ship faster with Pro.

Themes are free to browse and install. Pair them with Pro or Premium to unlock 1,837+ blocks, 2,093+ components, and 49 pages—all on the same design tokens.

  • 14 free shadcn themes with light & dark mode
  • Apply to 1,837+ blocks & 2,093+ components
  • Official CSS variables—compatible with Tweakcn, StyleGlide & Tinte
  • One-line CLI install into your globals.css
  • Unlock Pro/Premium for the full blocks & components library
Snow-capped alpine mountain peaks under a clear blue sky
DESIGN.md
Agent

Design.md

Alpine

Cobalt structure, coral heat, and a blush canvas—brand guidelines agents can paste straight into Cursor or Claude.

Shadcn Themes

14
  • Alpine
  • Vercel
  • Supabase
  • Claude