Create & Share Beautiful Shadcn UI Themes
Customize every design token (colors, typography, spacing, and radius) in a live preview. Save themes with a unique URL, share with teammates, and copy the CSS code straight into your project.
Design on an Infinite Canvas
Preview your theme across multiple UI components on a zoomable, pannable infinite canvas. See how your color choices and typography affect real components like cards, buttons, forms, charts, and more, all at once.
No more guessing. See the full picture.
Dozens of Customization Options
Go far beyond just a primary color. Tweak every design token: background, foreground, card, popover, muted, accent, destructive, border, ring, sidebar, and 5 chart colors. Plus fine-grained control over typography (font family, size, weight, line height), spacing units, border radius, and shadow.
Full token-level control over your design system.
Save, Update, and Share Themes
Hit Save and your theme gets a unique URL like ?theme=abc123. Come back later and update it or create a new version. Share the link with your teammates, clients, or the community. Anyone with the link can load your theme instantly.
Permanent shareable links for every saved theme.
Independent Light and Dark Mode Editing
Edit your light and dark color schemes separately. Switch between modes in the panel and tweak each token independently. The live preview updates in real time so you can see both modes side by side and get the perfect contrast for every context.
Pixel-perfect themes for both modes.
Preview Your Theme Across Templates, Components & Blocks
See your theme applied to real-world templates, UI components, and pre-built blocks — all rendered live inside the canvas. Whether it's a dashboard, a marketing page, or an e-commerce layout, you get an accurate preview before committing a single line of code.
What you see is exactly what you'll ship.
From zero to custom theme in minutes
- 1
Pick a preset
Start from one of the curated presets or begin from the default shadcn theme.
- 2
Customize tokens
Adjust colors, fonts, radius, and spacing until the live preview looks exactly right.
- 3
Save & export
Save to get a shareable URL, then copy the CSS block into your globals.css.
Get Lifetime Access Now
Unlock lifetime access today and become part of the growing shadcn ecosystem, empowering you to build your projects faster and more efficiently. Keep this continuously updated and ever-expanding collection at your fingertips — and stay ahead with the latest components, templates, and improvements.
Get All Access