Custom color pickers and shareable preset URLs
Pick any OKLCH color for base, theme, and chart tokens in the customizer, then share a preset page URL that restores your exact colors.
You can now go beyond the built-in color presets and dial in your own OKLCH values directly from the customizer.
What's included:
- Custom color pickers on Base Color, Theme, and Chart Color — each dropdown has a sticky color picker at the bottom so you can choose any color without leaving the menu
- Live preview updates as you adjust colors, with theme and chart colors following base when they're linked
- Shareable preset URLs — copy a link like
/preset/b0?baseCustomColor=...&themeCustomColor=...instead of a long/create?preset=...URL - Custom colors preserved on preset pages — when someone opens your shared link, the preset page loads your exact custom colors in the embedded customizer
Custom colors live in the URL as query params, so they travel with the link without changing the preset code itself. When no custom colors are set, sharing works the same as before.
Preset detail pages
Explore every shadcn preset as a complete design system, with colors, typography, icons, UI previews, and configuration all in one place.
Each preset now has its own dedicated page, bringing together every part of the design system so you can evaluate it before adding it to your project.
What's included:
- Explore the complete design system, including colors, typography, icons, charts, and UI components
- Preview presets across dashboards, authentication screens, marketing assets, and more
- Inspect the full preset configuration at a glance
- Discover similar presets without leaving the page
Figma plugin for preset variables
Enter a preset code, click generate, and you get light and dark mode variables for the shadcn theme belonging to that preset, perfect for syncing your Figma designs with your codebase.
Check it out the official shadcnpreset Figma plugin
WCAG color contrast checker for shadcn presets
Paste in any shadcn preset code and instantly view WCAG 2.x contrast ratios for light and dark mode theme tokens.
This makes it easier to:
- Quickly sanity check presets while exploring combinations
- Catch accessibility issues before applying presets to production UI
- Compare light and dark theme readability side-by-side
- Experiment with random presets without guessing contrast quality
Visit the color contrast checker
New shadcn block previews for presets
Preview shadcn presets applied to real UI blocks including dashboards and authentication screens.
New previews now include:
- dashboard
- login-02
- login-04
This is ideal for seeing how practical a preset will be in a real-world scenario.
More block previews will be added over time.
Generate full shadcn themes from preset codes
Decode a complete shadcn theme from a tiny preset code.
It's really simple, copy and paste a simple preset code into the generator and get a complete theme faster than you can say "Tailwind".
Visit the preset theme CSS generator
AI preset assistant
Describe what you want in plain English. Get relevant shadcn presets you can compare instantly.
This feature is a replacement for "smart search", as it produces more accurate results in far less time.
Visit the AI preset assistant
shadcnpreset launch
Find the perfect shadcn preset in seconds
shadcnpreset launches with a simple goal: helping you find and explore shadcn presets in seconds, not hours of trial-and-error.
There are ~1.5 billion possible preset combinations, but no easy way to browse, compare, or see what people actually like.
This release introduces a community-driven preset library for shadcn — free and open source.
Features include:
- Smart search across presets by keyword, style, and vibe
- Save and manage your own presets
- Community voting to surface the most useful combinations