Home/Install

Install

Two on-ramps. The CSS path is the lowest-friction option for any project. The React path ships as @corelithzw/react on public npm — same DOM, JSX wrapper.

CSS today React on public npm No build step required

What you can install today

Two on-ramps. Pick CSS for any framework; pick the React package if you want named components and types.

Path	Status	What you ship
CSS-only (Static HTML or any framework)	Stable	Two stylesheets and an icon helper. Documented classes. Works everywhere.
`npm i @corelithzw/react`	v0.1.3	Published to public npm. Same DOM as the CSS path, JSX wrapper, full TypeScript types.

(a) CSS only — the fast path

Copy three files out of this repo, link them in your head, write the documented classes. No build step. No JavaScript required to render.

Copy tokens.css, components.css, and icons.js into your project (we put them under /public/huchu/ in most apps).
Link them in <head>.
Write the documented class names — .btn-primary, .card, .dt-toolbar. Add data-icon="…" wherever you want an inline SVG.

<!-- Tokens (color, type, spacing, motion) -->
<link rel="stylesheet" href="/huchu/tokens.css">

<!-- Components (buttons, cards, tables, inputs) -->
<link rel="stylesheet" href="/huchu/components.css">

<!-- Inline-SVG icons (auto-renders <span data-icon>) -->
<script src="/huchu/icons.js" defer></script>

That's the entire install. Every recipe in the cookbook renders against exactly this CSS — the React snippets you see are JSX wrappers over the same DOM.

(b) React components — `@corelithzw/react`

The package ships to public npm. Anonymous install — no .npmrc, no token.

# Install
npm install @corelithzw/react react react-dom

# In your app entry — once
import '@corelithzw/react/styles.css';
import { Button, Card } from '@corelithzw/react';

Works everywhere

Any repo, any CI, any Docker container. Full owner / troubleshooting notes live in the package's INSTALL.md.

In the live ERP repo

If you're already working in tate2301/huchu, the tokens ship as CSS variables in app/globals.css and the components are Tailwind-derived shadcn primitives.

# From the repo root
pnpm install
pnpm dev

# Add a new component by extending the existing primitives
# Read components/ui/ for the source — it mirrors this docs site 1:1

This docs site documents the contract — what tokens exist, which variants are blessed, how they're used together. The ERP repo is the live implementation.

Token files

Tokens come in two shapes — CSS variables and a JSON manifest for design tools.

File	Purpose	Used by
tokens.css	CSS variables for color, type, motion, layout	Every HTML doc + every Tailwind theme
components.css	The component layer — .btn, .card, .input, .table	Static prototypes and the docs site
icons.js	Inline-SVG helper for <span data-icon>	Every page
system.css	Docs-site chrome (sidebar, TOC, specimen)	This site only
shared.css	Hub / marketing chrome	Kits, portals, verticals
dash.css	Dashboard shell layout	Vertical example pages
portal-shell.css	Portal app bar, tab bar, list rows	Portal example pages

Updates

Versioned via the changelog. New components ship behind a "Beta" pill until they've appeared in two live kits.