krizaka-ui

The Krizaka front-end platform. The shared packages every Krizaka product builds on, published on npm under @krizaka/*.

3.x is stable: web primitives and their React Native counterparts, the Krizaka · Orazaka · Yomizaka · Akinaza marks and the signature icons — charts are next. Documented at ui.krizaka.com.

Packages

Package	Version	What it is
@krizaka/tokens		The semantic --kz-* tokens: CSS (dark, light, media invariants), typed constants, React Native themes.
@krizaka/tailwind		The Tailwind CSS v4 preset: the tokens as utilities, illustration-only light:/dark:, the Krizaka easing.
@krizaka/ui		The primitives — button, card, dialog, toast, tabs, command palette, countdown… — for the web (one entry each) and React Native (/native), with the Krizaka marks, the motion signature and the registry behind the documentation.
@krizaka/icons		The Krizaka signature icons (70), drawn in code: React and React Native, tree-shakable.
@krizaka/intl

Documentation

ui.krizaka.com — the one place to read about the platform and share a link: one page per component, generated from the code of this repository by apps/site (Next.js + Fumadocs, a static export) and deployed on every push to main, so the docs always match the code. The code drives the documentation: each component's meta.ts (summary, when to use it and when not, accessibility, web / React Native / both, status, related components), its named examples (packages/ui/registry/examples, rendered live with their code) and its props (from the types) — a primitive without them fails the tests. apps/storybook is an internal tool: it renders the same examples to audit them (axe) and compare their screenshots in dark and light in CI; it is not deployed — there is no public Storybook.

For the products

npm install @krizaka/ui @krizaka/tailwind tailwindcss   # the primitives and the preset (tokens come with it)

/* app/globals.css */
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";
@import "@krizaka/tokens/brands/orazaka.css"; /* the product's identity: krizaka · orazaka · yomizaka · akinaza */

Import one primitive per entry (import { Button } from "@krizaka/ui/button"), React Native from @krizaka/ui/native. A product design system is a theme and its composites, never a copy of a primitive.

Keep up with the platform through Renovate — one pull request per platform release, patches merged on green CI — by extending the preset of this repository (renovate/krizaka.json):

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended", "github>krizaka/krizaka-ui//renovate/krizaka"]
}

or, without the preset, the same rules inline in the product's renovate.json:

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"],
  "packageRules": [
    { "matchPackageNames": ["@krizaka/**", "com.krizaka:**"], "groupName": "krizaka", "labels": ["dependencies", "krizaka"] },
    { "matchPackageNames": ["@krizaka/**", "com.krizaka:**"], "matchUpdateTypes": ["patch"], "automerge": true, "platformAutomerge": true }
  ]
}

Supported versions, deprecations and codemods: SUPPORT.md — majors N and N-1, fixes for 6 months after the next major.

Develop

pnpm install
pnpm turbo run check   # lint, type-check, tests, build, size budgets, publint
pnpm --filter storybook dev   # the internal catalogue on http://localhost:6006
pnpm changeset         # describe a change that ships

Visual baselines. The Storybook screenshots are Linux ones. After adding or changing a story, do not regenerate them locally: run the Update baselines workflow on your branch (Actions > Update baselines > Run workflow, or gh workflow run update-baselines.yml -f branch=<branch>). It pushes only the changed snapshots.

pnpm + Turborepo, released with Changesets. The rules are in AGENTS.md.

License

Apache-2.0

---

A Krizaka open-source project · krizaka.com · Apache-2.0

The Krizaka names and birds are not licensed by Apache-2.0 (s. 6): trademark policy.