Progressive components that compose with native HTML.

Install

Add the package, import the bundle, and the cui-* elements register on the global custom element registry. We currently have no npm package, but you can clone the repo and import the local bundle for now. A package is coming soon.

Use everything (drop-in)

Import the auto entry. Every cui-* element registers itself and the global utility stylesheet is included.

Use only what you need (tree-shakeable)

Import elements from their subpaths. Each one self-registers, so your bundler ships only the components you actually use.

Programmatic API & types

The package root is side-effect-free: it exports the element classes, helpers (toast, defineCombatUi, getTheme / setTheme) and TypeScript types, but on its own it does not register elements or inject any CSS. Call defineCombatUi() to register the whole set at once.

Global stylesheet

The utility-class layer (design tokens, layout, and the light-DOM cui-* classes) ships as a separate stylesheet. The auto entry includes it; otherwise import it once:

Maps

cui-map uses Leaflet as an optional peer dependency, loaded on demand the first time a map appears. Install it alongside Combat UI when you use maps (add leaflet.markercluster too for marker clustering):

Use a component

Import the bundle, then drop an element into your HTML. The element registers itself and the global utility stylesheet is included, no setup, no build step.