Skip to content

nexu-io/design

Repository files navigation

nexu-design

nexu-design is a pnpm workspace for Nexu's React and TypeScript UI library, shared design tokens, a Storybook app, and an Electron demo app.

Workspace packages

  • packages/ui-web@nexu-design/ui-web, the React component library
  • packages/tokens@nexu-design/tokens, shared design tokens and CSS
  • apps/storybook@nexu-design/storybook, the component playground and docs app
  • apps/demo@nexu-design/demo, the Electron demo app

Stack

  • React 19
  • TypeScript
  • Vite
  • Storybook 9
  • Vitest
  • Biome
  • pnpm workspaces

Getting started

Prerequisites

  • Node.js 20+
  • pnpm 10+

Install dependencies

pnpm install

Start local development

pnpm dev

This starts:

  • Storybook at http://localhost:6006
  • the Electron demo from apps/demo

Common commands

Root workspace

pnpm dev
pnpm dev:storybook
pnpm dev:demo
pnpm dev:demo:web
pnpm build
pnpm build:storybook
pnpm build:electron
pnpm build:packages
pnpm typecheck
pnpm test
pnpm lint
pnpm format
pnpm format:check
pnpm biome:check
pnpm release:check

Package-specific examples

pnpm --filter @nexu-design/ui-web test
pnpm --filter @nexu-design/ui-web typecheck
pnpm --filter @nexu-design/tokens build
pnpm --filter @nexu-design/storybook build-storybook
pnpm --filter @nexu-design/demo dev
pnpm --filter @nexu-design/demo dist

Repository structure

.
├── apps/
│   ├── demo/
│   └── storybook/
├── design-md/
│   └── … third-party DESIGN.md references (see design-md/README.md)
├── docs/
├── packages/
│   ├── tokens/
│   └── ui-web/
├── package.json
└── pnpm-workspace.yaml

Development notes

  • Use pnpm only.
  • Source files are written in TypeScript and React.
  • Component stories live in apps/storybook/src/stories.
  • The desktop demo lives in apps/demo, with Electron main/preload sources in apps/demo/main and apps/demo/preload.
  • Tests for @nexu-design/ui-web are co-located with source files and run with Vitest.
  • Formatting and code quality checks are managed with Biome and TypeScript.

Release validation

Before publishing package changes, run:

pnpm release:check

This validates package builds, type checks, tests, and dry-run packaging.

Additional docs

  • docs/package-publishing-and-consumption.md
  • docs/component-api-guidelines.md
  • docs/core-component-api-specs.md

About

Nexu design system and prototypes.

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors