Installation

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

Prerequisites

Crown packages are published to the GitHub Package Registry, not the public npm registry. You must configure registry auth before running any install command — otherwise you'll get a 404 from registry.npmjs.org.

1. Create a GitHub Personal Access Token (PAT)

Go to GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic) and generate a new token with the read:packages scope.

2. Add an .npmrc to your project root

@kingpowerclick:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

3. Export the token in your shell (or add it to your CI secrets)

export GITHUB_TOKEN=ghp_xxxxxxxxxxxx

You only need to do this once per project. After that, all bun add / npm install commands for @kingpowerclick/* packages will resolve correctly.

Install the Tailwind preset:

bun add @kingpowerclick/crown-tailwind

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

@import 'tailwindcss';
@import '@kingpowerclick/crown-tailwind';

Optionally, add Crown's prebuilt utility classes:

bun add @kingpowerclick/crown-utils

@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

Prerequisites

Activate a brand and theme

On this page