Open-source UI ecosystem

Interfaces,
built in flow.

Composable React components, shared design tokens and tooling designed to evolve as one system.

Explore components Read the docs

React TypeScript Design tokens Open source

The components

A small set, built with intent.

The current foundation has four components. Each one uses the same semantic theme and an explicit package export.

Component preview01 / 04

Actions

Input

Status

PrimaryNeutralOutline

In progress

Build with one foundation.

Compose a clear interface from shared primitives and semantic roles.

Design system / 001

Button / Input / Badge / CardView component docs

One connected foundation

Built as a system.

Tokens set the visual language. Canonical components feed registry metadata, documentation and local CLI scaffolding.

01TokensShared primitives and semantic roles
02ComponentsFour composable React building blocks
03RegistryTyped metadata for docs and CLI
04InterfacesPackage or locally owned source

Package mode uses @nimjs/ui. Copy mode uses canonical source through the local CLI and currently needs manual setup in external projects.

Design tokens

A visual language with a source of truth.

Primitive color values become semantic CSS variables. Components reference those roles, so the theme can change without rewriting component behavior.

Explore theming

Semantic color / light4 roles

Primary--primary

Accent--accent

Surface--surface-subtle

Border--border

brand.violet--primary

Developer experience

Start in the workspace. Grow with the system.

The packages are not published yet. Clone the repository to try the components today, then follow the installation guide for package and copy mode details.

Installation guide

pnpm install
pnpm dev

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

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

Open source by design

Shape what comes next.

Four components today. A clear path for contributing, reviewing and growing the system.

View on GitHub Read the docs