Tweakcn vs shadcnpreset
If you're looking for shadcn presets, you might come across Tweakcn.
It's a popular tool, but it solves a different problem. It works with themes. shadcnpreset works with presets.
They are two things that are not interchangeable.
Tweakcn only deals with themes
Tweakcn is a visual editor for customising the theme of a shadcn/ui project.
It adds a few things that you don't get with shadcn such as new custom properties that handle shadows and spacing. However, unless you are a designer, you can end up with something that still feels like a developer created it.
But what exactly is the difference between a theme and a preset?
Themes vs presets
A theme changes the visual tokens of a shadcn project, such as color pairings like primary & primary-foreground, chart and sidebar colors, and radius.
A preset goes further than a theme. It includes everything you get with a theme, plus component styles, base color, heading and body fonts, icon libraries and menu configuration.
This distinction matters because shadcn has evolved a lot. There are now a lot more ways to make a shadcn project your own, and changing the theme alone only gets you so far.
If all you've changed are the colors and radius, it can still look very obviously like shadcn. The component code is still using the same defaults.
That's where styles and the other preset options become useful. They change the actual components rather than just the variables underneath them.
What's actually in a preset?
A shadcn preset is a configuration that can include:
| Field | What it controls |
|---|---|
style | The design of the components themselves — including their sizing, spacing, typography, borders, shapes and states |
baseColor | The neutral colours used for things like backgrounds, cards, borders, inputs and muted text |
theme | The accent colour system used for primary actions and other highlighted UI, including foreground colours |
chartColor | The colour palette assigned to charts and other data visualisations |
iconLibrary | The icon set imported and used by components, such as Tabler, Lucide or Phosphor |
font | The main typeface used for body text throughout the project |
fontHeading | The typeface used for headings |
radius | The default corner radius applied to components such as buttons, inputs, cards and dialogs |
menuAccent | The styling of active and highlighted items within menus and navigation |
menuColor | The colour treatment of menus, dropdowns and popovers |
When I decode the preset b4YtS7GakV, this is what is I get back from the CLI:
code b4YtS7GakV
version b
style luma
baseColor mist
theme lime
chartColor indigo
iconLibrary tabler
font instrument-sans
fontHeading merriweather
radius large
menuAccent subtle
menuColor inverted-translucent
url https://ui.shadcn.com/create?preset=b4YtS7GakVSome of these fields are theme values. Others change the actual component code or project configuration.
For example, the style field changes the components themselves. Two presets can use the same colors, fonts and radius while producing very different interfaces.
That's something Tweakcn can't deal with.
shadcn/create works with presets
shadcn/create is the official preset builder.
It gives you the available configuration options and lets you build a preset by choosing the options you want.
Once you're done, you get a preset code that you can pass to the shadcn CLI.
npx shadcn@latest init --preset b4YtS7GakVThere are millions of possible combinations.
shadcn/create lets you build any of them, but finding the one you want can take a long time.
That's where shadcnpreset comes in.
shadcnpreset is for finding presets
shadcnpreset uses the exact same configuration options as shadcn/create.
It doesn't use a different preset format or create a separate type of configuration. The presets are built from the same possibilities.
The difference is that you don't have to start from an empty configuration.
You can browse presets that have already been created, see how they look across real interfaces and compare them before deciding which one to use.
Community presets
There are a lot of possible combinations, so shadcnpreset uses community voting to help surface the ones people have found useful in real projects.
You can browse the community, see which presets have been submitted and voted for, and save the ones you want to come back to.
Ask AI
You can also describe what you're looking for instead of manually working through the configuration.
For example:
Calm SaaS dashboard, muted neutrals, all in Mira
Ask AI uses that description to find matching presets and lets you preview them on real components.
You can also ask for specific combinations:
Give me three options. One in Lyra, one in Luma and one in Mira.
Preview the whole thing
A preset isn't just a color palette, so looking at its variables doesn't tell you everything about how it will feel.
shadcnpreset lets you preview presets across real interfaces, including dashboards, login pages, marketing pages, applications, stores and chat interfaces.
This makes it easier to compare the things that a theme editor can't show you: component sizing, spacing, typography, shape and the overall feel of the interface.
So what's the difference?
The easiest way to think about it is:
Tweakcn helps you create a theme.
shadcn/create helps you create a preset.
shadcnpreset helps you find one.
They're solving different problems.
If you already know the colours and visual tokens you want to use, a theme editor makes sense.
If you want to build a specific shadcn configuration yourself, use shadcn/create.
If you want to explore the millions of possible configurations and find one that's already close to what you're looking for, use shadcnpreset.
The goal of shadcnpreset isn't to replace shadcn/create. It's to make a huge configuration space easier to explore.