shadcn/ui theme tool
Shadcn theme generator for busy developers
Give your shadcn/ui project a real look, fast - pick a color, preview it live, and ship a theme ready for production.
Give your shadcn/ui project a real look, fast - pick a color, preview it live, and ship a theme ready for production.
Our shadcn theme generator is designed to help you create a shadcn/ui theme in a few clicks.
Pick a Tailwind color and shade, or drop in your brand hex. Get a full light and dark theme that stays consistent, with a moon hint for dark picks.
See changes instantly as you tweak your theme. Switch between landing, dashboard, and charts, then toggle light or dark mode anytime.
Set body and heading fonts that work well together. Link them for a consistent look, or unlink to see suggested pairings.
Set the radius once so every component feels consistent. Pick None, Small, Medium, Large, or Full with presets up to 1.5rem.
Copy theme CSS in one click. Randomize for quick ideas, reset to defaults, or import into our shadcn/ui Figma kit anytime.
Get clean CSS variables block for Tailwind v4 and shadcn/ui, with colors, radius, fonts, and shadows ready to paste into globals.css.
Start with a Tailwind color family and shade, or paste in your brand hex. The theme will be generated based on this color.
Dial in the feel. Pick a border radius preset, then choose body and heading fonts. Keep them linked for a clean look, or split them for more character.
Watch the theme update on a landing page, dashboard, and charts. When it clicks, copy the theme CSS and paste it into globals.css.
Get answers to common questions about our shadcn theme generator.
An extensive collection of Figma and React resources to help designers, developers, and teams deliver shadcn/ui projects efficiently.
2,000+ Figma components that perfectly mirror shadcn/ui code. Auto-layout, variants, and Tailwind CSS variables included.
Convert your designs into clean, production-ready shadcn/ui code. Export and import styles to keep design and code aligned.
Pixel-perfect, prebuilt blocks for landing pages, dashboards, and e-commerce. Available in Figma and React.
Dedicated website templates built with shadcn/ui to speed up your workflow.