Install

One command copies every component, block, and primitive into your repository as source you own. Core includes neutral defaults for both light and dark modes. No skin, configuration file, or provider is required.

Install just the components you need. Each item brings its dependencies and the same core defaults.

Blocks bring a complete composition of the same components.

Each item appends its own imports to the CSS entry named in components.json. For a button:

The registry writes ../components/…. If your aliases use different paths, run node <install dir>/scripts/fix-css-imports.mjs, then verify below.

The doctor ships with the install. It is read-only: it reads the CSS entry named in components.json, follows every import it finds, and looks for the data-skin stamp.

Keep it runnable as a script, so a later session — or your agent — can check the wiring without this page:

Anything else is one of the five checks below. Errors exit non-zero and block: styling on top of them is what reads as a broken install afterwards. Warnings exit zero and are deletion offers, named file by file and token by token.

Two flags reach beyond the wiring audit. --contrast resolves the theme contract's required color pairs straight from the installed CSS — no browser, no network — and prints a per-mode tally with every failure named:

It reads the Tailwind palette, the core theme, the installed skin theme and every *.control-ui-theme.css the entry imports, in that order, so it sees exactly what the browser resolves. A pair a recipe paints — popup items, sidebar, tabs, solid buttons, tooltip, focus ring, badges — is not guessed at; those live in the rendered audit at /theme-accessibility. A failure names the pair, its ratio and the threshold, and exits non-zero. A value the engine cannot model, such as color-mix(), is reported as unverified instead of passing.

--emit-css turns a theme artifact into the one derived stylesheet an app imports:

It writes midnight.control-ui-theme.css beside the artifact. Never hand-write those selectors: the emitted scope doubles the data-skin attribute to match the pack's own weight, which is what hands the win to source order.

The doctor audits wiring, never taste. It cannot see a token that is ugly, only one that is undeclared, dead, or fighting the skin. Each deletion it offers is a change to source you own, so it names the file and the token instead of writing them. Run it after every install, update, and migration.

Re-value tokens in your application's CSS. Core declares defaults at zero specificity, so your declarations win. “No skin” in these docs shows that library baseline.

Refined and the other example skins are optional registry presets. Installing one adds its token CSS, component CSS, and config. Pass that config to SkinProvider and use its id on your theme boundary. The provider carries the id and behavior choices through portals. See the create-a-skin guide for the complete setup.

Registered component knobs are published by paint family under /r/contract/, indexed by /r/contract/index.json.

The same components and neutral defaults ship as @ctrl-ui/react. The package contains no skin presets. Import paths mirror the registry tree: replace @/components/control-ui/ with @ctrl-ui/react/.

Use components immediately, then add your application theme. SkinProvider is optional in both install paths.