Theme system

KiteUI ships preset themes as CSS variables. Install with the CLI, then customize in .kiteui/theme.json.

CLI

Install themes with npx kiteuikit theme <preset> or the full setup wizard. CLI reference

$ npx kiteuikit theme ocean

Presets

KiteUI Default

Soft pink, sky blue, and lavender — the classic KiteUI look.

default

Sunset

Warm peach, coral, and golden hour tones.

sunset

Ocean

Cool teal, deep blue, and seafoam accents.

ocean

Forest

Fresh mint, sage, and earthy greens.

forest

Lavender Dream

Soft purple, lilac, and blush gradients.

lavender

Hyper Realistic

High-contrast, glossy tones with cinematic depth.

hyper-realistic

Flat

Minimal, low-contrast surfaces with clean geometry.

flat

Maximalist

Bold color collisions, playful bubbles, and oversized rounding.

maximalist

Mono

1930s film-inspired monochrome with sepia paper tones and charcoal contrast.

mono

Customization

Override any token in .kiteui/theme.json:

{
  "preset": "ocean",
  "overrides": {
    "light": {
      "--bubble-pink": "oklch(0.88 0.08 350)",
      "--primary": "oklch(0.58 0.14 230)"
    },
    "dark": {}
  }
}

--bubble-pink — Bubble pink
--bubble-sky — Bubble sky
--bubble-mint — Bubble mint
--bubble-peach — Bubble peach
--bubble-lavender — Bubble lavender
--primary — Primary
--background — Background
--foreground — Foreground
--radius — Border radius
--radius-bubble — Bubble radius

Back to installation