Zero/Packages/Zero Kit/Installation
@sigx/zero-kit · Beta

Installation#

Add @sigx/zero-kit to a design-system package as a dev dependency, beside @sigx/cli for the sigx binary and @sigx/zero for the anatomy manifest the build validates against.

Install the package#

Terminal
pnpm add -D @sigx/zero-kit @sigx/cli @sigx/zero

The kit is Node-only and must never be a runtime dependency — one value import of its barrel would drag node:fs into every browser consumer of the design system. Install @sigx/cli as a direct dev dependency too: a package manager only links the executables of direct dependencies, and the CLI discovers the kit's commands in any directory that has it installed.

A design-system package#

JSON
{
    "name": "@acme/zero-acme",
    "type": "module",
    "exports": {
        ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
        "./register": { "types": "./dist/register.d.ts", "import": "./dist/register.js" },
        "./css": "./dist/css/index.css",
        "./css/tokens": "./dist/css/tokens.css",
        "./css/*": "./dist/css/components/*.css",
        "./manifest.json": "./dist/manifest.json",
        "./report.json": "./dist/report.json"
    },
    "files": ["dist", "src"],
    "scripts": {
        "build": "tsgo -p tsconfig.json && node build.mjs",
        "validate": "sigx zero:validate --strict"
    },
    "peerDependencies": { "@sigx/zero": "^0.2.0-beta.1" },
    "devDependencies": {
        "@sigx/cli": "^0.10.0",
        "@sigx/zero": "^0.2.0-beta.1",
        "@sigx/zero-kit": "^0.2.0-beta.1",
        "typescript": "^6.0.3"
    }
}

@sigx/zero is a peer dependency of the design system (its runtime module calls registerThemes) and a dev dependency for the build. The source layout and build.mjs are described in Authoring a design system.

The subpaths#

SubpathRuns inUse it for
@sigx/zero-kitNode onlyThe compiler, validators, artifact writers, manifest tooling and conformance helpers — build scripts and tests.
@sigx/zero-kit/defineanywheredefineTokens, defineRecipe, defineDesignSystem, defineApi and their types — the one surface a design-system source module may value-import.
@sigx/zero-kit/buildNode onlyrunStandardBuild — the whole pipeline as one function.
@sigx/zero-kit/pluginNode onlyThe sigx CLI plugin; loaded by the CLI, never imported by hand.

tokens.ts and recipes.ts ship in the design system's runtime bundle, so they import from the kit type-only (import type { TokensInput, RecipeInput } from '@sigx/zero-kit').

Verify#

Terminal
sigx zero:validate --help
sigx zero:build --help

Both commands print their current flags. In a package with a compiled dist/design-system.js, sigx zero:validate --report prints the coverage report. See Validate and build.