▲ 16 r/shadcn

Browse shadcn presets as design systems

After shadcn/preset exposed preset data, I saw an opportunity to do something a bit different.

I took inspiration from graphic design and explored what it would look like to treat presets as complete design systems rather than the typical themes and color palettes.

It evolved into a new way to browse presets, where every preset has its own identity and shows how it can be applied across typography, imagery, layouts, icons, charts, dashboards, auth screens, marketing pages, and more.

It was a fun creative and graphic exploration, but I also found it a much nicer way to browse presets than scrolling through endless grids of cards.

Curious what other people think.

Check it out here: https://shadcnpreset.com

u/gamsto — 5 days ago
▲ 22 r/shadcn

I tested thousands of shadcn presets for accessibility - only mauve fully passed

I ran a script across a huge number of shadcn preset combinations and turned a small subset of the results into a filterable page with 8,000+ high contrast presets.

You can:

  • filter presets that already fully pass AA contrast checks
  • preview real UI with presets applied
  • save presets for later simply by clicking the heart button

Fun fact: from everything tested so far, only the mauve presets consistently achieved 100% AA contrast for normal text across the entire system.

Check them out here: high contrast shadcn presets

Feedback welcome!

u/gamsto — 2 months ago
▲ 7 r/shadcn+1 crossposts

Generate shadcn theme variables from a tiny preset code

I was working on some Figma designs and needed values from a bunch of shadcn presets… ended up building a plugin for it.

You can generate a full theme from a tiny preset code now.

I'm genuinely excited by the potential for unpacking so much from a simple code.

Here's the figma plugin

Feedback welcome!

u/gamsto — 2 months ago
▲ 20 r/shadcn+1 crossposts

The app can score millions of generated presets using semantic token pairs like:

  • foreground/background
  • primary/primary-foreground
  • sidebar/sidebar-foreground
  • etc.

I’m considering features like:

  • Top 100 most accessible presets
  • Best dark mode presets
  • Best balanced light/dark presets
  • Worst contrast presets (for fun/debugging)

But I’m unsure what would actually be useful.

A few questions:

  • Would “most accessible presets” be valuable to you?
  • Should results come from:
    • community presets only
    • the entire generated preset catalog

Curious how other people would expect this to work.

Here's the color contrast checker

u/gamsto — 2 months ago
▲ 83 r/shadcn+1 crossposts

I needed some proper design assets showing presets applied to real shadcn blocks - not just isolated components.

Ended up adding more preview UI to shadcnpreset:

Now includes:

  • dashboard
  • login-02
  • login-04 (alongside View 01 & 02)

What would you want to see next? Tables? Settings? Something else?

u/gamsto — 2 months ago
▲ 31 r/shadcn

I was working on some Figma designs and needed values from a bunch of shadcn presets… ended up building a tool for it.

You can generate a full theme from a tiny preset code now.

I'm genuinely excited by the potential for unpacking so much from a simple code.

Feedback welcome!

Here's the link: https://shadcnpreset.com/tools/preset-theme-generator

u/gamsto — 2 months ago