Getting Started

Activation path

Bring the ChromVoid surface layer online without building a demo app first.

Install the package, register the custom elements once, load the token surface, and validate a themed composition inside the docs before wiring a product shell.

Start setupOpen playground

01 add package and peer runtime02 load tokens at the app boundary03 register custom elements once04 compose inside cv-theme-provider

InstallPackage and Lit runtime

RegisterOne browser entrypoint

ComposeReal custom elements

ValidateDocs, playground, reference

Install

Add UIKit and its Lit peer dependency from the workspace or application package.

bun add @chromvoid/uikit lit

Register components once

@chromvoid/uikit/register exports the bulk registration entry for all web components. Call it at the browser shell boundary, next to the token import.

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

registerUikit()

Boundary rule

Registration is a shell concern. Feature code should compose documented elements instead of re-registering the kit per route or per component.

Render your first surface

Wrap the composition with cv-theme-provider when you want a scoped color mode or runtime theme. The docs render this snippet as a live custom-element preview.

View source

<cv-theme-provider mode="dark">
  <section class="getting-started-surface" aria-label="Vault bootstrap preview">
    <div class="getting-started-surface-copy">
      <span class="getting-started-eyebrow">Vault bootstrap</span>
      <strong>Ready for shell wiring</strong>
      <span>Tokens, actions, binary state, and progress share one surface.</span>
    </div>
    <div class="getting-started-surface-actions">
      <cv-button variant="primary" pill>Unlock vault</cv-button>
      <cv-switch checked>Core paired</cv-switch>
    </div>
    <cv-progress value="64" max="100" aria-label="Bootstrap progress"></cv-progress>
  </section>
</cv-theme-provider>

Custom elements

Use stable DOM contracts

Components expose slots, attributes, events, CSS parts, and documented behavior without coupling application state to the docs site.

Token surface

Keep visual identity scoped

Import the default tokens once, then use providers or named themes when a subtree needs a controlled visual mode.

Validation loop

Check composition before wiring

Move from this quick start into the playground when you need to test controllers, stateful controls, or larger component combinations.

Scope a theme

Use cv-theme-provider for a subtree, or apply a named theme at runtime.

import {applyTheme, defineTheme} from '@chromvoid/uikit/theme'

defineTheme('amber', {
  '--cv-color-primary': '#ff9d4d',
  '--cv-color-primary-dark': '#e67d2e',
  '--cv-color-surface': '#171d29',
  '--cv-color-border': '#31415b',
})

applyTheme(document, 'amber')

Preview locally

The documentation site is the primary interactive surface for the package.

bun run docs:dev
bun run demo

Local loop

Use the docs before a product shell exists.

docs:dev prepares generated reference pages, builds the package, and starts VitePress. demo keeps the compatibility entrypoint for opening the same docs server.

Open playground Browse reference

Next steps

Understand package layeringCustomize tokens and runtime themesTest working component compositionsBrowse full API reference pages