Getting started

Theming

Every StacklyUI component reads from CSS custom properties. Override them globally to rebrand the whole library, or per-instance for one-off tweaks.

The token set

Colors are defined in OKLCH, so lightness, chroma, and hue are independent — nudging one token keeps the palette perceptually balanced. These are the defaults:

tokens.css

:root {
  /* Surfaces & text */
  --sui-bg: oklch(0.16 0.015 275);
  --sui-surface: oklch(1 0 0 / 0.04);
  --sui-border: oklch(1 0 0 / 0.1);
  --sui-fg: oklch(0.96 0.005 275);
  --sui-muted: oklch(0.72 0.02 275);

  /* Accent ramp — the brand gradient */
  --sui-accent:   oklch(0.62 0.19 288);
  --sui-accent-2: oklch(0.58 0.20 268);
  --sui-accent-3: oklch(0.78 0.13 205);

  --sui-radius: 1rem;
}

Light & dark

Both themes are tuned, not derived. StacklyUI switches on a .dark class on <html> (managed for you by ThemeProvider). Light-mode overrides live under a .light selector, so you never get a washed-out afterthought.

Rebrand in seconds

Override the accent ramp anywhere in your global CSS to change the entire library's personality:

globals.css

:root {
  /* Swap violet→cyan for an emerald→lime brand */
  --sui-accent:   oklch(0.72 0.17 155);
  --sui-accent-2: oklch(0.78 0.18 140);
  --sui-accent-3: oklch(0.86 0.19 125);
  --sui-accent-gradient: linear-gradient(
    110deg,
    var(--sui-accent),
    var(--sui-accent-2),
    var(--sui-accent-3)
  );
  --sui-accent-glow: oklch(0.72 0.17 155 / 0.4);
}

Per-instance overrides

Because tokens cascade, you can scope changes to a single component via inline styles or a wrapping class:

example.tsx

<SpotlightCard
  glow="oklch(0.78 0.18 30)"
  style={{ "--sui-radius": "1.5rem" }}
>
  Warm glow, rounder corners — just this card.
</SpotlightCard>