Cyberpunkpink
All collections
shadcn/ui themes using Outfit
Every theme here sets its interface text in Outfit. Compare how the same typeface feels with different colors, radius and shadows.
27 themes · 2 pass WCAG AA in both modes · popular fonts: Outfit
Retro Arcadepink
Supabasegreen
Amber Slateorange
Blue Vivid 4blue
Burnt Siennared
CENTRALred
Claude Amberorange
Claude Amber 2neutral
Crispteal
Crisp 2teal
Dotorange
Emerald Softyellow
Emerald Sungreen
Escaladogreen
Escalado V2green
Hostinggreen
Hosting2green
Jobboardgreen
Nature 2green
Neon Magentapink
Neon Magenta 2pink
Neon Redpink
Nexus salgreen
Sky Vivid 4blue
Frequently asked questions
How do I add Outfit to my app?
In Next.js, import Outfit from next/font/google and assign it to the --font-sans variable on <html>. The theme's CSS already references Outfit by name.
How do I install a outfit 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.