ChromVoid UIKitUI kit for ChromVoid product surfaces

Accessible Lit web components, headless behavior from @chromvoid/headless-ui, and token-driven theming shaped for production application work.

Get Started

Open Playground

Browse Components

Spec-backed reference

Component API pages are generated from the specs directory so docs stay aligned with the source of truth.

Playground included

The interactive playground lives inside the docs and covers live controller and state scenarios.

GitHub Pages ready

Static-safe routing, generated reference pages, and a deploy workflow ship with the package.

Surface layer

Built for product shells, not isolated gallery demos.

UIKit is the surface layer for ChromVoid products. Behavior stays in headless models, while the package exposes a focused set of Lit custom elements, theme tokens, and controller helpers for real application flows.

Custom elementsComposable slots, parts, and DOM contracts.
Theme tokensScoped runtime themes without forking component logic.
ControllersDialog and toast flows kept close to the kit.

45Spec-backed reference pages

1 siteGuides, playground, and API reference in one place

0 rewritesGitHub Pages-safe output with static routing

Why This Site Exists

Reference

Docs stay close to the specs

Component pages are generated from specs/components, so the published API reference stays aligned with the real contract instead of drifting into hand-maintained copy.

Tooling

One static surface

Guides, reference pages, and the live playground ship from the same VitePress build and work under the GitHub Pages subpath without rewrite assumptions.

Workflow

Built for product teams

Start with install and registration, move into theming and architecture, then validate composed states in the playground before wiring a real shell.

Quick Start

Install path

Register once, load tokens, compose real product states.

The default entry point keeps registration explicit while the theme provider scopes the visual system around the components you render.

01Wire the bundle
Import the bulk register entry and the token CSS in the browser entry.
02Scope the surface
Wrap composed UI in cv-theme-provider when a product shell owns theme mode.
03Validate the state
Render controls, selection, and progress together before moving into a feature route.

entry.ts

import {registerUikit} from '@chromvoid/uikit/register'
import '@chromvoid/uikit/theme/tokens.css'
registerUikit()

shell.html

<cv-theme-provider mode="dark">
  <cv-button>Unlock vault</cv-button>
  <cv-checkbox checked>Arm sync</cv-checkbox>
  <cv-progress value="58" aria-label="Migration progress"></cv-progress>
</cv-theme-provider>

Rendered stateVault migration controls

Unlock vault

Arm sync

How The Package Is Layered

Headless models

Interaction and accessibility contracts stay in @chromvoid/headless-ui where they remain testable outside the render layer.

Lit adapters

UIKit custom elements translate those models into slots, parts, attributes, events, and DOM contracts that application shells can compose directly.

Theme engine

Tokens, runtime themes, and cv-theme-provider let products scope visual identity without forking component logic.

Controller helpers

Toast and dialog helpers keep common orchestration flows close to the package while the visual contract stays on the documented elements.

Choose Your Entry Point

Install and register the full kit Understand the package layering Customize tokens and runtime themes Browse the generated component catalog

Need Live Validation?

Playground

Use the docs as the working surface

The live playground keeps controller-backed alerts, toasts, selection patterns, and composed component states in one dedicated page instead of a separate demo app.

Open playground Browse reference