Changelog

A custom preset is a whole shadcn preset you shape yourself. Start from any preset in Ask AI and change its style, fonts, icons, radius and colours, by chatting or with shadcn create's pickers. It can also use your exact brand colours, like #1E3A8A or oklch(70.4% .191 22.216), which a preset code can't hold. Mention a colour in the chat and choose Use my colours.

What's included:

• Style — the eight shadcn styles, which set the spacing, padding and shape of every component
• Fonts — a body font and a heading font, or one for both
• Icons and radius — any of the five icon libraries and five radius sizes
• Colours — Base Color, Theme and Chart Color each take a list choice or one custom colour, carried through the preset the way shadcn does, and you can override single tokens like the background
• Edit by chatting — while the preset is open beside the chat, the chat only works on it: "switch to Mira", "use Lora for headings", "make the theme green"
• Install it — set up the preset with its code, then add your colours with one npx shadcn@latest add command, or copy them as CSS
• Share it — every custom preset has its own page

Also fixed: two buttons in the preset preview ignored the preset's style, so in Sera they stayed rounded and in normal case.

shadcn themes is a new section with 60 free themes for shadcn/ui, taken from the most voted community presets. A theme is the colour layer of a preset: colours, radius and charts. Your components, style and icons stay as they are.

Every theme has its own page:

• See it on real UI — cards, forms, charts and a dropdown, in whichever mode you're browsing in
• Every colour — the palette, token by token
• Copy the CSS — or apply it with npx shadcn@latest apply --preset <code> --only theme
• Real blocks — a landing page built from shadcncraft Pro blocks, dressed in the theme, so you can see it beyond a few components
• Browse without losing your place — the sidebar lists every theme with search and a base colour filter, and switching keeps you where you were on the page

Themes come without fonts, so you can now add a pairing. Open Fonts on any theme page and pick one of the pairings community presets use, with the ones used alongside that theme first, or choose any heading and body font yourself. The previews switch to your fonts straight away, and the CSS and command include them: --only theme,font installs the fonts and sets them up. The pairing is kept in the link, so you can share it, and it stays with you as you switch themes.

Also new: a themes rail on the homepage, and a side-by-side guide to the eight shadcn styles, now titled for the styles it compares.

Links to shadcncraft in this entry and on theme pages are affiliate links. If you buy through them, shadcnpreset earns a commission at no extra cost to you.

Build a page is a full page builder for shadcn/ui. Browse the shadcncraft Pro blocks, add the ones you want, and arrange them right on the page. Every block is built from the components defined by the preset, so switching presets restyles the whole page: colours, radius, fonts and icons.

What's included:

• 157 blocks to build with — heroes, features, pricing, testimonials, FAQs and more for landing pages; categories, products, cart and checkout for stores; charts, tables and metrics for dashboards; plus headers, sidebars and footers
• Browse and add — search the blocks, narrow them by kind, and click a preview to add it to the page
• Edit on the page — hover a block to move it up or down or remove it; clear the page and start again, with undo
• Any preset on top — shuffle for a random one, pick one you've saved, or save the one on screen
• Share what you built — the page lives in its link, so it opens exactly as you left it
• Get the code — the blocks are shadcncraft Pro, and one click takes you there

You can also start with AI. Describe a page, like "landing page for a cosy coffee shop" or "dark fintech dashboard for sales teams", and Jev, from TypeSafe, drafts it in about half a second: the sections, a design for each, a header and footer, and a preset to dress it in. Then edit it like any other page.

Also new: Build is in the main navigation, and Community has moved into the Presets menu.

Links to shadcncraft in this entry and in the builder are affiliate links. If you buy through them, shadcnpreset earns a commission at no extra cost to you.

Describe a preset uses Jev from TypeSafe to turn a few words into a preset. Type "cosy coffee shop" or "brutalist, sharp, black and white" and the preview restyles itself while you are still typing: colours, fonts, icons, radius and the shell, all at once.

What's included:

• Live results — a new preset arrives about half a second after you stop typing, rendered in the same shadcn create preview as every preset page
• See what Jev understood — the sidebar shows each part of the preset, how sure Jev was, and whether you asked for it or it was inferred from the overall mood
• Ideas to start from — one click on an idea fills in a description to try or adapt
• Keep what you like — open the result as a full preset page, vote for it, copy its code or share it

Jev is built to make fast, structured decisions rather than write text. It reads your description once and picks every part of the preset in a single request, which is why results come back so quickly.

shadcnpreset is now partnering with shadcncraft. They make well-built shadcn/ui blocks for real products, and seeing a preset applied to them is one of the quickest ways to judge how it will hold up in a real project.

What's included:

• Marketing — a full landing page with hero, logos, benefits, metrics, testimonial, pricing, FAQs and footer
• Application — a workspace overview with metric cards, charts, a members table and an activity feed
• Store — categories, products, a product page, cart and checkout
• Chat — an AI conversation where the assistant generates UI inline, showing how a preset carries through to generative UI

Each preview is built from the components defined by the preset, so switching presets restyles the whole page: colours, radius, fonts and icons.

Links to shadcncraft in this entry and in the previews are affiliate links. If you buy through them, shadcnpreset earns a commission at no extra cost to you.

What's included:

• Urls now contain ids — previously there were no history entries for assistant urls, that is fixed now
• We now use links instead of buttons — right clicking on a conversation link will allow you top open in a new tab

What's included:

• Ask for a component, see it built — "show me a date picker with this preset applied" returns a working component rendered in the preset's theme, fonts and radius
• Previews in the conversation — each one renders inline where you asked for it, with an Open button to send it to the main preview area

What's included:

• A sidebar beside the preview — Community and Your presets sit next to the preset you're looking at, so browsing is one pane rather than one dialog after another
• Ask AI comes with you — Use AI to generate a preset using natural language right where you preview a preset

What's included:

• Get Code on preset pages — grab commands for installing code using the shadcn CLI or coy theme CSS directly form the preset you are browsing
• Get Code on preset detail pages — the sticky controls now open the same New Project, Existing Project, and Theme dialog as Edit
• Copy the preset code from the preview title — same one-click copy as the edit page heading

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.

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

Check it out the official shadcnpreset Figma plugin

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 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.

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

This feature is a replacement for "smart search", as it produces more accurate results in far less time.

Visit the AI preset assistant