A lightweight, token-driven React + Tailwind component system.
- @unhq/tokens — CSS variables for light/dark; the single source of truth.
- @unhq/tailwind-preset — Tailwind config that maps tokens → utilities.
- @unhq/ui — Headless-ish, token-first components.
- @unhq/blocks — Higher-level compositions (optional, WIP).
- apps/docs — Ladle stories for visual tests and theming controls.
Install core packages:
pnpm add @unhq/ui @unhq/tailwind-preset @unhq/tokenstailwind.config.ts
import type { Config } from "tailwindcss";
import preset from "@unhq/tailwind-preset";
export default {
presets: [preset],
} satisfies Config;globals.css
@import "@unhq/tokens/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;Then use components:
import { Button } from "@unhq/ui";
export function Example() {
return <Button>Click me</Button>;
}Tokens → Tailwind preset → components.
See docs/THEMING_CONTRACT.md.
-
Run docs locally:
pnpm -C apps/docs dev
-
Build all packages:
pnpm -w build
-
Typecheck:
pnpm -w typecheck
- Work should be done in feature branches.
- Use descriptive branch names:
feat/button-secondaryfix/input-focus-ringchore/size-limit
Open a PR into main when ready.
Every PR and push to main runs CI:
- Typecheck
- Build
- Docs build (Ladle)
- Size-limit guards
- Publish dry-run
CI must be green before merging.
We use Changesets for versioning and releases.
For user-facing changes:
pnpm changeset # choose bump + write summary
pnpm -w version # update versions & changelogs
git push --follow-tags
pnpm -w publish # publish to npmSee CONTRIBUTING.md for full guidelines.
MIT © UnHQ