GitHub
New

Customization

Zaidan uses a registry-based theming system. To change the style, colors, base colors, radius, or fonts, you simply add the registry item you want through the shadcn CLI — no manual CSS editing needed. To change all of them at once, use a preset.

Styles

Styles control the visual treatment of every component — spacing, borders, padding, rounded corners. Zaidan ships with 8 styles: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea. Rhea keeps Luma's soft, pillowed treatment in a more compact layout.

When you add a style, the CLI creates or overrides two files in your project: styles/base.css, which holds the .z-* classes that style every component using Tailwind @apply directives, and styles/utilities.css, which holds the utilities those classes rely on. Both should be automatically imported in your main css file, if not, add them yourself:

src/index.css
@import "tailwindcss";
@import "./styles/utilities.css";


@layer base {
  @import "./styles/base.css";


  .z-font-heading {
    @apply font-heading;
  }
}

Colors & base colors

Zaidan separates colors into three layers:

  • Base colors (neutral, stone, zinc, gray, mauve, olive, mist, taupe) — a complete palette: backgrounds, borders, muted, sidebar, radius, and a neutral primary
  • Accent themes (amber, blue, cyan, emerald, fuchsia, green, indigo, lime, orange, pink, purple, red, rose, sky, teal, violet, yellow) — override primary, secondary, sidebar primary, and the chart palette
  • Chart palettes (@zaidan/chart-<name>) — override chart-1 through chart-5 only, so charts can use one palette while the rest of the app uses another

All colors use the OKLCH color space and are applied as CSS custom properties with light and dark variants. Add a base color and a theme the same way:

The CLI injects the corresponding CSS variables into your project. Dark mode variants are included automatically.

Radius

Border radius comes from a single --radius variable. Tailwind's radius scale derives from it — --radius-sm is calc(var(--radius) - 4px), --radius-lg is var(--radius), and so on — so every component that uses rounded-sm, rounded-md, rounded-lg, or rounded-xl follows it. Changing it once updates every component.

Base colors already ship a default --radius. To override it, add one of the four radius items:

radius-none, radius-small, radius-medium, and radius-large are available.

Fonts

Zaidan provides 26 font families as registry items, spanning sans, serif, and monospace types. Each is a registry:font item declaring the family, the Google Fonts provider, and the variable it sets — --font-sans, --font-serif, or --font-mono — and the CLI wires the face into your project:

Headings read --font-heading. Point it at a second family when you want headings to differ from body text; the create page below does that for you.

Presets

The create page puts every option — style, base color, theme, chart palette, body and heading fonts, radius, and menu accent — behind one shareable code, and turns that code into a single registry item:

The preset carries the merged light and dark CSS variables, sets --font-sans and --font-heading, and pulls in @zaidan/style-<style> plus the font items it needs. It also writes the matching components.json values (style, iconLibrary, menuAccent, menuColor, and the Tailwind base color), so one command lands the whole design system.