Installation

The KOMPAN component library ships as plain HTML and CSS. There is no frameworklock-in — you add two packages and use the documented class names.

The packages are private to the KOMPAN GitHub organisation, so installing themneeds a token. That is deliberate: organisation membership is what grants access,rather than a separately managed list of people.

1. Authenticate to the registry

Create a **classic** personal access token with the `read:packages` scope(fine-grained tokens are not supported by the npm registry on GitHub Packages),then add an `.npmrc` next to your `package.json`:

@kompan:registry=https://npm.pkg.github.com//npm.pkg.github.com/:_authToken=YOUR_TOKEN

Keep the token out of version control — read it from an environment variable inCI, and from your own `~/.npmrc` locally. ## 2. Install

npm install @kompan/kompan-ui

@SCOPE/kompan-ui depends on @kompan/kompan-tokens, so the tokens come with it.

Install the tokens package on its own if you only need the design tokens.

3. Add the stylesheet

Import the bundle once, at the entry point of your app: import '@kompan/kompan-ui'

That pulls in the token custom properties and then declares the components on topof them, in that order. If your setup imports CSS by path instead:

<link rel="stylesheet" href="node_modules/@kompan/kompan-ui/ui.css">

Use a component

Every component is documented with copy-pasteable markup. The Avatar component uses .avatar and its modifier classes.

Design tokens

Colours, spacing and typography are exposed as CSS custom properties. Names carrytheir collection, so they are long but unambiguous:

background: var(--1-color-mode-sections-branch-button-primary-bg);

Browse the full set on the Tokens page.

Themes and modes

The stylesheet ships more than the default look. Add a class to any element — or to <html> — to switch the tokens beneath it:

- `.dark` — dark mode - `.theme-blue`, `.theme-green`, `.theme-olive`, `.theme-orange` — brand themes - `.region-asia` — regional variant Red is the default and needs no class. Breakpoint values are appliedautomatically by media query.

Versioning

Each release publishes an immutable version; a published version is neverreplaced. Upgrade deliberately by bumping the version in your `package.json`.