Ayuorange
All collections
Code editor themes for shadcn/ui
The color schemes you already live in all day, mapped to every shadcn/ui token. Dark-only schemes get a matching light mode, and every text pair is tuned to pass WCAG AA.
19 themes · 19 pass WCAG AA in both modes · popular fonts: Inter
Catppuccin Latte & Mochapurple
Cobalt2yellow
Draculapurple
Everforestgreen
GitHubblue
Gruvboxorange
Horizonpink
Kanagawablue
Night Owlblue
Nordblue
Palenightpurple
Poimandresteal
Rosé Pinepurple
Solarizedblue
Synthwave '84pink
Tokyo Nightblue
Vesperorange
Frequently asked questions
How are editor themes mapped to shadcn tokens?
The editor background becomes the page background, panels become cards and the sidebar, selection and line-highlight colors become secondary and muted surfaces, the scheme's signature color becomes primary, and syntax colors become the five chart colors.
What about schemes without a light mode?
For dark-only schemes such as Kanagawa, Cobalt2 and Synthwave '84, we generate a light mode around the scheme's primary hue and keep its accent colors for charts.
How do I install a editor 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.