Installation

Point the @zynactra scope at GitHub Packages

The packages are private, published to GitHub Packages under the zynactra org. Add this to the app's .npmrc:

@zynactra:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

• On your machine: export a personal access token with read:packages as GITHUB_TOKEN, or run gh auth token if you use the GitHub CLI with that scope.
• In the app's CI: an org admin opens each package's settings (@zynactra/ui and @zynactra/tokens) and adds the app's repository under Manage Actions access. The app's workflow then needs only permissions: packages: read and GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}; no personal token.

Install

npm install @zynactra/ui

@zynactra/tokens comes with it. Install it on its own only for non-React consumers (emails, the Payload admin theme, Go templates).

Import the stylesheet

In your global CSS, replacing any @import "tailwindcss":

@import "@zynactra/ui/styles.css";

This brings Tailwind v4, the locked token theme and the Zynactra theme. To use a different theme, or several, see Themes:

@import "@zynactra/ui/core.css";
@import "@zynactra/ui/themes/harbor.css";

Load the fonts

For the Zynactra theme, Instrument Sans and JetBrains Mono (other themes). Self-host them with Fontsource so production never calls Google:

npm install @fontsource/instrument-sans @fontsource/jetbrains-mono

import "@fontsource/instrument-sans/400.css"
import "@fontsource/instrument-sans/500.css"
import "@fontsource/instrument-sans/600.css"
import "@fontsource/instrument-sans/700.css"
import "@fontsource/jetbrains-mono/400.css"
import "@fontsource/jetbrains-mono/500.css"

Use a component

import { Button } from "@zynactra/ui/button"

export default function Page() {
  return <Button variant="brand">Deploy</Button>
}

Turn on the Claude Code plugin

If the app is built with Claude Code, commit the plugin settings to .claude/settings.json, and add zynactra-ui check to CI. Claude then follows the house rules, reads the docs for the installed version, and checks its own work.