Keyu UI

Component library for the Circuit direction of the Keyu design system — re-skinned shadcn/ui primitives in black and gold, bilingual-first (EN / AR / KU).

Live docs: https://keyu-tech.github.io/keyu-ui/ Design system: https://keyu-tech.github.io/keyu-ui/design-system.html

Install

Two equally supported flows.

As an npm package

npm install @keyu-tech/keyu-ui
# or
yarn add @keyu-tech/keyu-ui
# or
pnpm add @keyu-tech/keyu-ui

import { Button, Dialog, DialogContent, DialogTitle } from "@keyu-tech/keyu-ui";
import "@keyu-tech/keyu-ui/tokens.css";
import "@keyu-tech/keyu-ui/base.css";   // optional — global resets
import "@keyu-tech/keyu-ui/shadcn.css"; // component styles

Via the shadcn CLI

The repo publishes a shadcn-compatible registry. Init against it once, then add components individually:

pnpm dlx shadcn@latest init -t https://keyu-tech.github.io/keyu-ui/registry.json
pnpm dlx shadcn@latest add button input dialog

The CLI copies the .tsx source into your project's components/ui/ directory and adds the relevant Radix packages to your package.json.

What ships today

The library implements the foundation slice:

• Form / display: Button, Input, Textarea, Label, Badge, Card
• Overlay / behaviour (Radix-backed): Dialog, Popover, DropdownMenu, Tabs

The remaining shadcn primitives are themed in CSS already (shadcn.css covers accordion, calendar, command, OTP, menubar, etc.) but don't yet have React wrappers. Adding them follows the established pattern; PRs welcome.

What's in this repo

| Path | Purpose | |---|---| | tokens.css | Single source of truth — primitive + semantic tokens | | base.css | Optional element resets layered on the token sheet | | shadcn.css | The Circuit skin — class-driven, theme-aware | | keyu-ui/ | React component sources (TypeScript) | | registry.json | shadcn registry index | | r/ | Generated per-component registry entries (built by pnpm registry) | | index.html | Developer documentation site (deployed to /) | | design-system.html | Full design system reference (deployed to /design-system.html) | | tools/ | Prototyping helpers (e.g. tweaks-panel.jsx) — not part of @keyu-tech/keyu-ui | | .github/workflows/pages.yml | Auto-deploys to GitHub Pages on push to main | | .github/workflows/release.yml | Runs semantic-release on push to main — publishes to npm, tags, writes CHANGELOG.md |

Develop

pnpm install
pnpm typecheck   # tsc --noEmit
pnpm build       # tsup → dist/ (ESM + CJS + .d.ts)
pnpm registry    # rebuild r/*.json from registry.json
pnpm format      # prettier --write .

Releases

Releases are fully automated by semantic-release running in .github/workflows/release.yml. On every push to main it inspects the commits since the last tag and, if any are releasable, bumps the version, tags, writes CHANGELOG.md, publishes @keyu-tech/keyu-ui to npm, and cuts a GitHub Release.

Commit messages must follow the Conventional Commits format:

| Prefix | Effect | |---|---| | feat: … | minor bump (new feature) | | fix: …, perf: … | patch bump | | feat!: … or any commit with a BREAKING CHANGE: footer | major bump | | chore: …, docs: …, refactor: …, test: …, ci: …, style: … | no release |

Setup requirement: an NPM_TOKEN repository secret with publish rights to the @keyu-tech scope. The built-in GITHUB_TOKEN covers tags, the release, and the CHANGELOG.md commit.

Deployment

Push to main also triggers .github/workflows/pages.yml, which type-checks, builds, regenerates the registry, and publishes the docs + CSS + registry to GitHub Pages.

License

MIT © Keyu.tech, 2026.