Getting Started

Theming

One layer of CSS variables between you and a billion-dollar look.

Every performative-ui component is painted from a single set of CSS custom properties, all prefixed --pui-*. There are no hard-coded colors inside the components, so re-theming is just a matter of redefining a few variables. Tailwind v4 maps these tokens to utility classes via @theme inline, so your overrides flow through to both the components and your own markup.

Dark & light

The palette is keyed off a data-theme attribute. Dark is the default (:root); light is applied when [data-theme="light"] is present. Set the attribute on <html> and every component flips at once.

<!-- Toggle the whole palette with one attribute on <html>. -->
<html data-theme="dark"> … </html>
<html data-theme="light"> … </html>

Token reference

The tokens you'll reach for most often. Each is a plain custom property — override it anywhere in the cascade.

Surfaces

Token	Purpose
--pui-bg	Page background
--pui-bg-elev	Cards, popovers, elevated panels
--pui-bg-soft	Inset / muted fills
--pui-border	Default border color
--pui-border-bright	Emphasised borders, inputs

Text

Token	Purpose
--pui-fg	Primary text
--pui-fg-dim	Secondary text
--pui-fg-mute	Tertiary / placeholder text

Gradient

Token	Purpose
--pui-grad-from	First stop of the signature gradient
--pui-grad-mid	Middle stop
--pui-grad-to	Final stop
--pui-grad	Composed linear-gradient() built from the three stops

Semantic

Token	Purpose
--pui-success	Success states, healthy status dots
--pui-danger	Errors, destructive actions
--pui-warn	Warnings, degraded status

Shape & type

Token	Purpose
--pui-radius-sm / --pui-radius / --pui-radius-lg / --pui-radius-xl	Corner radius scale
--pui-font-sans	UI font stack
--pui-font-mono	Code / eyebrow font stack
--pui-font-serif	Editorial / snark font stack
--pui-glow / --pui-glow-strong	Neon glow shadows

Overriding tokens

Redefine any token after importing the package styles. Because the gradient is composed from --pui-grad-from/mid/to, changing the three stops re-skins every gradient, glow, and button in one move.

@import "tailwindcss";
@source "../node_modules/performative-ui-svelte/dist";
@import "performative-ui-svelte/styles.css";

/* Override any token you like — everything cascades from here. */
:root,
[data-theme="dark"] {
  --pui-grad-from: #06b6d4;
  --pui-grad-mid: #3b82f6;
  --pui-grad-to: #8b5cf6;
  --pui-radius: 1rem;
}

Theme generator

Tweak the tokens below and watch real components react in the live preview. When it looks right, copy the generated CSS straight into your app.css.

Presets

Surfaces

Background #08080d Elevated #11111a Soft #191923 Border #2b2b39 Border bright #383849

Text

Foreground #f5f5f8 Dimmed #aaaab8 Muted #76768b

Gradient

From #7c3aed Mid #ec4899 To #38bdf8

Semantic

Success #22c55e Danger #f87171 Warning #fbbf24

Shape & Type

Corner radius 12px

Sans font

Live preview

Now generally available

Ship agentic workflows

Components that signal how oversubscribed your funding round is.

Operational Degraded Down

✦

Reason

Multi-step, multi-modal, multi-vendor.

Learn more →

Theme CSS

/* Generated with the performative-ui theme generator */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces */
  --pui-bg: #08080d;
  --pui-bg-elev: #11111a;
  --pui-bg-soft: #191923;
  --pui-border: #2b2b39;
  --pui-border-bright: #383849;
  /* Text */
  --pui-fg: #f5f5f8;
  --pui-fg-dim: #aaaab8;
  --pui-fg-mute: #76768b;
  /* Gradient */
  --pui-grad-from: #7c3aed;
  --pui-grad-mid: #ec4899;
  --pui-grad-to: #38bdf8;
  /* Semantic */
  --pui-success: #22c55e;
  --pui-danger: #f87171;
  --pui-warn: #fbbf24;
  /* Corner radius */
  --pui-radius-sm: 0.5rem;
  --pui-radius: 0.75rem;
  --pui-radius-lg: 1.125rem;
  --pui-radius-xl: 1.375rem;
  /* Type */
  --pui-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}