Getting Started

Installation

NimJS UI packages are not publicly released. Evaluate package mode and copy mode from packed local artifacts in an external React 19 and Tailwind 3 project.

Start with the consumer cookbook

The repository consumer setup guide contains the tested pack commands, local dependency overrides, Tailwind mapping, CSS paths, and troubleshooting steps. Use it before either example below.

Workspace development is a separate flow: use Node 20.11+, pnpm 9.15.4, pnpm install, and pnpm dev from the NimJS UI repository root to run this site.

Open the consumer setup guide

Package mode

After installing the packed @nimjs/ui and @nimjs/tokens artifacts and their local dependencies, import token CSS once. Configure Tailwind 3 to scan @nimjs/ui/dist and map semantic colors to CSS variables as shown in the consumer cookbook.

The package ships class names, not compiled component CSS. React and React DOM 19 are peer requirements. Public imports are the package root and explicit component subpaths.

@import '@nimjs/tokens/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

import { Button } from '@nimjs/ui';

export function Example() {
  return <Button>Continue</Button>;
}

Copy mode

After installing packed @nimjs/cli and @nimjs/registry artifacts, init creates ui.config.ts, and add copies canonical source plus a local cn helper and token CSS. The copied files belong to the application; package upgrades do not update them.

The CLI reports npm dependencies and refuses to overwrite edited files. Install the reported packages, import the copied CSS, and configure Tailwind 3 manually. The consumer cookbook has the complete sequence.

pnpm exec ui init
pnpm exec ui add button --dry-run
pnpm exec ui add button
pnpm add class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^2.6.0

import { Button } from './components/ui/button/button';