Quickstart

Go from zero to a themed Cronwerk button in five minutes — a path per consumer type, plus theming and font setup.

stable

1. Install

Add the two packages. @cronwerk/ui peer-depends on React 19; @cronwerk/tokens has zero dependencies and works in plain HTML/CSS too.

pnpm add @cronwerk/tokens @cronwerk/ui
# or, while unpublished, from git:
pnpm add "github:prin7r/cronwerk-ui#path:packages/tokens"

2. Import the CSS (once, globally)

Import the token layer before the component layer — this order is the contract (LIBRARY-SPEC §4.6):

import "@cronwerk/tokens/tokens.css"; // 1. tokens: :root + [data-theme="dark"] + scale
import "@cronwerk/ui/styles.css"; // 2. component CSS (all cw-* classes)

The library ships no global reset beyond color-scheme.

3. Set up fonts

The language is set in Inter Variable (UI) and JetBrains Mono Variable (code/numerics). Load them however you like; the simplest is Fontsource:

pnpm add @fontsource-variable/inter @fontsource-variable/jetbrains-mono

import "@fontsource-variable/inter";
import "@fontsource-variable/jetbrains-mono";

Fonts are the consumer’s responsibility — the tokens reference the families by name (--font-sans, --font-mono) but never bundle the files.

4. Add the pre-paint theme snippet

Light is the brand default (not the system preference). Inline @cronwerk/tokens/theme-init.js in <head> before any body markup so the stored theme applies before first paint (no flash):

<script>
  /* contents of @cronwerk/tokens/theme-init.js — reads the shared
     "cronwerk-theme" key and sets data-theme before paint */
</script>

Build tooling can inline it for you: @cronwerk/tokens/vite-plugin (Vite) and @cronwerk/tokens/astro (Astro) both inject the snippet automatically.

5. Render your first component

That is the whole setup. Drop a pill button in and you are done:

import { Button } from "@cronwerk/ui";

export function Cta() {
  return <Button variant="solid-accent">Get started</Button>;
}

Your first button source

<Button variant="solid-accent">Get started</Button>

Paths by consumer type

The five steps are the same everywhere; only where you put steps 2–4 differs.

React SPA (Vite)

Import the CSS and fonts once at your entry (main.tsx). Wrap the app in ThemeProvider from @cronwerk/ui/theme if you want a runtime theme toggle, and add @cronwerk/tokens/vite-plugin to inline the pre-paint snippet.

SSR / static site (Astro, Next)

Add @cronwerk/tokens/astro (or inline THEME_INIT_SNIPPET in your document <head>) so the theme is correct before hydration. This docs site itself is an Astro consumer — it is built entirely from @cronwerk/ui.

Plain HTML / pre-React project

@cronwerk/tokens needs no build step: link tokens.css, add the theme snippet, and use the cw-* classes from @cronwerk/ui/styles.css directly. This is the supported path for gradual adoption.