Amber Minimalorange
All collections
shadcn/ui themes using Inter
Every theme here sets its interface text in Inter. Compare how the same typeface feels with different colors, radius and shadows.
122 themes · 22 pass WCAG AA in both modes · popular fonts: Inter
Ayuorange
Catppuccin Latte & Mochapurple
Clean Slatepurple
Cobalt2yellow
Cosmic Nightpurple
Draculapurple
Everforestgreen
GitHubblue
Graphiteneutral
Gruvboxorange
Horizonpink
Kanagawablue
Modern Minimalblue
Night Owlblue
Nordblue
Palenightpurple
Poimandresteal
Rosé Pinepurple
Solarizedblue
Synthwave '84pink
Tangerineorange
Tokyo Nightblue
Vesperorange
Avenuneutral
Avenu 2neutral
Azure Flowblue
B&Wneutral
Bainred
Blue menablue
Blue Soft 2blue
Blue Soft 3blue
Blue Vivid 3blue
Blue Vividtest2blue
Borsanred
BOSred
Call Roomblue
CitizenShipblue
Claude Azureblue
Clay Emberorange
Cobalt Loftblue
Cobalt Monoblue
Cobalt Steelblue
Coral Teal 2pink
Cosmic Indigopurple
Frequently asked questions
How do I add Inter to my app?
In Next.js, import Inter from next/font/google and assign it to the --font-sans variable on <html>. The theme's CSS already references Inter by name.
How do I install a inter 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.