Kipui

Your own theme

Build a palette from one brand colour, watch it on real components in both modes, and copy back only the tokens you changed.

Tokens
31 colours
Modes
light + dark
Output
CSS you paste

Build it

Load a preset, then edit any colour in the left column — light and dark on the one switch. The pane on the right is that theme, live, on the real components.

Presets

Colours · light

Surface

Background
Foreground
Card
Card text
Popover
Popover text
Border
Input border
Reverse

Brand

Primary
Primary text
Secondary
Secondary text
Muted
Muted text
Accent
Accent text
Focus ring

State

Destructive
Destructive text
Success
Success text
Warning
Warning text
Info
Info text

Chart

Series 1
Series 2
Series 3
Series 4
Series 5

Live preview

N

Order desk

Northwind · updated 2 minutes ago

Total orders

3,484↑ 11%vs. last month

Avg. delivery

4.3days↓ 3.3%vs. last month

Fulfilled

2,318↑ 7.4%vs. last month

Orders by channel

Last 7 days
Online1,420
Retail980
Wholesale640
Partner320
Kiosk124

Track shipment

In transit
Order confirmed08:21 AM
In sorting centre09:15 AM
In transit10:32 AM
Out for delivery—
Estimated arrivalToday, 6:40 PM
ProductPaymentStatusTotal

Man U away kit (2008–09)

#SHA54321-75 · 3 pcs

VisaPending$103.00

Apple iPad (10th gen)

#FAH124541-7F · 1 pc

PayPalDone$653.00

MacBook Air M4

#SLR132132-9N · 12 pcs

VisaShipped$999.00
Showing 3 of 128 orders

Take the CSS

This is the stylesheet driving the preview, so what you see is what you paste. Only the tokens you changed are in it — everything else keeps tracking the package.

Nothing differs from the defaults yet — change a colour and it appears below. Written as :root and .dark, so it replaces the defaults everywhere.

app/globals.css
/* Custom — generated by kipui.
   Paste below @import "kipui/theme.css". Every token, standalone.
   */

:root {
  --background: oklch(0.985 0.004 258);
  --foreground: oklch(0.21 0.03 258);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.21 0.03 258);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.21 0.03 258);
  --border: oklch(0.9 0.015 258);
  --input: oklch(0.9 0.015 258);
  --reverse: oklch(0.21 0.03 258);
  --primary: oklch(0.55 0.2 258);
  --primary-foreground: oklch(0.99 0.0047 258);
  --secondary: oklch(0.96 0.012 258);
  --secondary-foreground: oklch(0.25 0.03 258);
  --muted: oklch(0.96 0.01 258);
  --muted-foreground: oklch(0.52 0.03 258);
  --accent: oklch(0.93 0.0337 258);
  --accent-foreground: oklch(0.3 0.08 258);
  --ring: oklch(0.55 0.2 258);
  --destructive: oklch(0.58 0.222 27);
  --destructive-foreground: oklch(0.99 0.0048 27);
  --success: oklch(0.53 0.146 150);
  --success-foreground: oklch(0.99 0.0047 258);
  --warning: oklch(0.78 0.15 75);
  --warning-foreground: oklch(0.2 0.03 75);
  --info: oklch(0.54 0.1237 240);
  --info-foreground: oklch(0.99 0.0047 258);
  --chart-1: oklch(0.55 0.2 258);
  --chart-2: oklch(0.6 0.1092 220);
  --chart-3: oklch(0.65 0.16 280);
  --chart-4: oklch(0.55 0.0935 200);
  --chart-5: oklch(0.5 0.16 300);
  --spacing: 0.25rem;
  --radius: 0.625rem;
  --shadow-strength: 1;
  --tracking-base: 0em;
  --tracking-display: -0.02em;
  --motion: 1;
}

.dark {
  --background: oklch(0.17 0.025 258);
  --foreground: oklch(0.96 0.01 258);
  --card: oklch(0.21 0.03 258);
  --card-foreground: oklch(0.96 0.01 258);
  --popover: oklch(0.21 0.03 258);
  --popover-foreground: oklch(0.96 0.01 258);
  --border: oklch(0.3 0.025 258);
  --input: oklch(0.32 0.025 258);
  --reverse: oklch(0.96 0.01 258);
  --primary: oklch(0.62 0.19 258);
  --primary-foreground: oklch(0.2 0.03 258);
  --secondary: oklch(0.27 0.03 258);
  --secondary-foreground: oklch(0.96 0.01 258);
  --muted: oklch(0.25 0.03 258);
  --muted-foreground: oklch(0.7 0.03 258);
  --accent: oklch(0.32 0.06 258);
  --accent-foreground: oklch(0.96 0.01 258);
  --ring: oklch(0.62 0.19 258);
  --destructive: oklch(0.62 0.21 27);
  --destructive-foreground: oklch(0.2 0.03 27);
  --success: oklch(0.53 0.146 150);
  --success-foreground: oklch(0.99 0.0047 258);
  --warning: oklch(0.74 0.15 75);
  --warning-foreground: oklch(0.2 0.03 75);
  --info: oklch(0.54 0.1237 240);
  --info-foreground: oklch(0.99 0.0047 258);
  --chart-1: oklch(0.62 0.19 258);
  --chart-2: oklch(0.66 0.1202 220);
  --chart-3: oklch(0.7 0.152 280);
  --chart-4: oklch(0.6 0.102 200);
  --chart-5: oklch(0.56 0.152 300);
}

Where it goes

Three lines in the stylesheet you already have. Nothing else in your app changes.

  1. 01

    Install the package

    npm install kipui — the same package the components come from. Skip this if it is already there.
  2. 02

    Import the tokens, then paste yours under them

    @import "kipui/theme.css" declares every token; the block above redeclares the handful you changed. Order matters — yours has to come second to win.
  3. 03

    Nothing else

    Components read the variables, so they follow. No provider, no config file, no rebuild step — and --radius or --motion moves the whole library the same way.