Vercelneutral
All collections
shadcn/ui themes using Geist
Every theme here sets its interface text in Geist. Compare how the same typeface feels with different colors, radius and shadows.
31 themes · 5 pass WCAG AA in both modes · popular fonts: Geist
Accessible Goldyellow
Accessible Tealteal
Accessible Violetpurple
Blue Softblue
Blue Soft 5blue
Casp3r Garage & Gatepurple
Catppuccin Violetpurple
Darkblue-whiteblue
GOTHneutral
Grupo Totumblue
Meridian Blueblue
MetaMaskpurple
Midnight v2blue
Ocean SaaSblue
Pantheon Cyberpunk Noirpurple
Pehneutral
Periwinkle Inkneutral
Rosé Pine 2purple
Slate Linenneutral
Slate Linen 2neutral
Slate Minimalblue
Slate Minimal 4blue
Slate Minimal 5neutral
Slate Minimal 886bc2purple
Still Harborblue
Surenaneutral
Vercel 6blue
Vercel 7neutral
Vercel remix graneutral
Frequently asked questions
How do I add Geist to my app?
In Next.js, import Geist from next/font/google and assign it to the --font-sans variable on <html>. The theme's CSS already references Geist by name.
How do I install a geist theme?
Open any theme and copy its shadcn CLI command (npx shadcn@latest add …), or copy the Tailwind v4 CSS into app/globals.css, replacing the :root and .dark blocks.
Are these themes free?
Yes. Every theme on shadcnthemes.com is free to use in personal and commercial projects.
Can I customize a theme?
Yes. Click “Open in editor” on any theme to change colors, fonts, radius and shadows, check contrast, and export the result.