Skip to content
Control Room

Getting Started

Control Room ships as a set of scoped packages on GitHub Packages. You can adopt the whole thing or just the layer you need — tokens alone, tokens plus the CSS component layer, or the compiled framework components on top.

Authenticate once

Section titled “Authenticate once”

The packages are published privately under the @alebianco scope, so npm needs a token with read:packages before it can resolve them. Add this to your project’s .npmrc:

@alebianco:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

Then export a personal access token with read:packages as NODE_AUTH_TOKEN. Never commit the token itself — keep it in your shell profile or your CI secrets.

Install

Section titled “Install”
Terminal window
# the visual foundation: tokens + the cr- component CSS
pnpm add @alebianco/cr-tokens @alebianco/cr-styles


# optional: compiled components for your framework
pnpm add @alebianco/cr-components

The packages

Section titled “The packages”
PackageWhat it gives you
@alebianco/cr-tokensThe token layer — theme CSS, a Tailwind @theme layer, DTCG export, and the machine-readable theme contract. The source of truth for every value.
@alebianco/cr-stylesThe cr- component CSS: 70+ parts, framework-agnostic. Works with plain HTML.
@alebianco/cr-componentsInteractive components compiled from one Mitosis source to React, Vue, Svelte, Angular, Solid, and Qwik.
@alebianco/cr-iconsThe pixel icon set.
@alebianco/cr-utilsHelpers — cn, theme switching, duration/time-scale formatting, form validation.
@alebianco/cr-mcpAn MCP server exposing the catalog, theme contract, and these docs as tools — so an agent can query the system directly.
@alebianco/cr-skillThe system as an installable agent skill.

Wire up the CSS

Section titled “Wire up the CSS”

Import the token layer, then the component layer. Order matters — the components resolve against token custom properties.

import "@alebianco/cr-tokens/css";          // all four themes + primitives
import "@alebianco/cr-styles/components";   // the cr- component classes

That’s the whole visual foundation. From here, markup is plain HTML with cr- classes:

<section class="cr-panel">
  <h4 class="cr-panel__title">Sessions</h4>
  <div class="cr-row">
    <span class="cr-sev cr-sev--work" role="img" aria-label="working"></span>
    <span class="cr-row__name">nova-01</span>
    <span class="cr-row__status">streaming</span>
  </div>
  <button type="button" class="cr-btn cr-btn--sig-accent">Escalate</button>
</section>

Pick a theme

Section titled “Pick a theme”

Themes are selected with a single attribute on the root element — there is no per-theme code anywhere in your app:

<html data-theme="dark">

Four core themes ship: dark (the default), light, extreme, and phosphor. Seven brand themes are also generated — aurora, aurora-light, boardroom, ember, harbor, porcelain, slate. Load one from @alebianco/cr-tokens/themes/*.

To switch at runtime without a flash of the wrong theme, set the attribute before first paint:

<script>
  (function () {
    try {
      var t = localStorage.getItem("cr-theme");
      if (t) document.documentElement.setAttribute("data-theme", t);
    } catch (e) {}
  })();
</script>

See theming & branding to build your own theme against the contract.

Using the framework components

Section titled “Using the framework components”

Interactive components (anything with real state, keyboard behaviour, or ARIA) are authored once and compiled per framework. Import from your framework’s subpath:

// React
import { CrButton, CrCombobox } from "@alebianco/cr-components/react";
<!-- Vue -->
<script setup>
import { CrButton, CrCombobox } from "@alebianco/cr-components/vue";
</script>

The same names exist under /svelte, /angular, /solid, and /qwik. The compiled output applies cr- classes and carries no styling of its own, so it still needs the two CSS imports above.

See framework components for the per-target details, and the styling contract for pt / dt / unstyled overrides.

With Tailwind

Section titled “With Tailwind”

The token layer ships a Tailwind v4 @theme block, so every token becomes a Tailwind utility:

@import "tailwindcss";
@import "@alebianco/cr-tokens/tw-theme.css";

See Tailwind-first.

For agents

Section titled “For agents”

The system is designed to be consumed by tooling, not just read by people:

  • MCP server — npx @alebianco/cr-mcp exposes the component catalog, the theme contract, and every reference doc as MCP tools and resources.
  • llms.txt / llms-full.txt — the whole system as a single flat document.
  • catalog.json — all 83 components with categories, tokens, variants, and keywords, queryable.
  • DTCG tokens — @alebianco/cr-tokens/dtcg for design-tool interop.

Where to go next

Section titled “Where to go next”