Installation

Crown ships three integration tiers. Pick the one that matches your stack; all three coexist if you need them.

Install the CSS variables package and the Tailwind preset:

bun add @kingpowerclick/crown-css @kingpowerclick/crown-tailwind

Add Crown's imports to your global CSS entry (app/globals.css or equivalent):

@import 'tailwindcss';
@import '@kingpowerclick/crown-css/themes.css';
@import '@kingpowerclick/crown-tailwind';
@import '@kingpowerclick/crown-tailwind/theme.css';
@import '@kingpowerclick/crown-tailwind/variants.css';

Optionally, add Crown's prebuilt utility classes:

@import '@kingpowerclick/crown-utils/utilities.css';

Crown's colour, spacing, and radius tokens are now available as Tailwind utilities:

<button class="bg-primary-foreground-default text-on-primary-content-high rounded-cta-sm px-4 py-2">
  Buy now
</button>

Install the CSS variables package:

bun add @kingpowerclick/crown-css

Import it once at your app root:

@import '@kingpowerclick/crown-css/themes.css';

Use tokens directly as CSS custom properties — every Crown token is exposed under the --crown- prefix:

.button {
  color:            var(--crown-color-primary-content-default);
  background-color: var(--crown-color-primary-foreground-default);
  border:           1px solid var(--crown-color-primary-border-default);
  border-radius:    var(--crown-radius-cta-sm);
  padding:          var(--crown-padding-general-sm) var(--crown-padding-general-md);
}

.button:hover {
  background-color: var(--crown-color-primary-foreground-hover);
}

For tooling or non-web platforms that need structured token data:

bun add @kingpowerclick/crown-css

import tokens from '@kingpowerclick/crown-css/tokens'

// Each entry has: name, cssVar, layer, values (keyed by permutation), and optional reference.
console.log(tokens[0])
// { name: 'color-primary-foreground-default', cssVar: '--crown-color-primary-foreground-default',
//   layer: 'semantic', values: { 'kp-light': '#...', 'wf-light': '#...', 'kp-dark': '#...' } }

For metadata about available dimensions (brands, modes, defaults):

import dimensions from '@kingpowerclick/crown-css/dimensions'

Activate a brand and theme

All three tiers read their active values from data-brand, data-mode, and data-screen attributes on ancestor elements. Set them on <html> to scope the whole document:

<html data-brand="kp" data-mode="light" data-screen="base">

Attribute	Values	Default
`data-brand`	`kp`, `wf`, `gwl`	`kp`
`data-mode`	`light`, `dark`	`light`
`data-screen`	`base`	`base`

You can also scope brand or mode to any subtree — not just <html>:

<!-- This section renders in GWL brand while the rest of the page stays KP -->
<section data-brand="gwl">…</section>

Next: build your first themed component in Your first themed page.

Installation

Activate a brand and theme

On this page