Themes

SmoothUI ships complete color themes you can install in any shadcn project with one command — light and dark mode included, compatible with both Radix UI and Base UI primitives.

crisp

soft

round

A full token set, one install

Each theme writes backgrounds, foregrounds, borders, ring, charts and sidebar tokens for light and dark — built on SmoothUI’s neutral scale with a palette accent.

Quick start

Pick a palette and install it. The CLI writes every CSS variable into your global stylesheet:

npx shadcn@latest add https://smoothui.dev/r/theme-candy.json

Available themes: theme-candy, theme-indigo, theme-blue, theme-red, theme-orange, theme-green.

Each theme defines the full token set — backgrounds, foregrounds, borders, inputs, ring, charts, sidebar — using SmoothUI's smooth neutral scale with the palette's accent, in both :root and .dark.

Theme Studio

smoothui.dev/playground is an interactive studio: a draggable board previewing the entire component registry with your theme applied live.

• Theme — six accent palettes.
• Mode — preview light or dark.
• Font — Sans, Serif or Mono, applied to the preview and the exported CSS (--font-sans).
• Tint — re-tint the neutral scale: pure Neutral, Warm or Cool.
• Radius — a continuous 0–24px scrubber driving every rounded-* value.
• Accent — shift the accent's oklch lightness ±15 points.

Every card on the board shows a real component demo, links to its docs, and copies its install command.

SmoothUI presets

The studio encodes your full configuration into a compact preset code:

s1.candy.16.20.mono.warm

Unlike shadcn/create presets (limited to their catalog values), SmoothUI presets carry the exact oklch palette, continuous radius, accent shift, font and tint. Three ways to use one:

Share it

Copy preset link produces a URL that restores every control:

https://smoothui.dev/playground?preset=s1.candy.16.20.mono.warm

Install it

Any custom configuration is installable directly — the registry builds the theme on the fly from the code:

npx shadcn@latest add https://smoothui.dev/r/theme-custom-s1.candy.16.20.mono.warm.json

Copy the CSS

Copy CSS variables exports the exact :root / .dark blocks for manual pasting, always reflecting the current controls.

shadcn/create interop

Each palette also maps to the closest shadcn/create preset (for example Candy ≈ b3gmgq, their pink). The studio links to it as an approximation: shadcn's preset system only supports its own catalog values, so the exact SmoothUI palette, tint and accent shift don't survive the round trip. For full fidelity, use SmoothUI presets.