Chassis React

React component library for the Chassis Design System, built on Chassis CSS and TypeScript.

Overview

Chassis React is the React implementation of the Chassis Design System — a set of accessible, fully-typed components styled with @chassis-ui/css and driven by @chassis-ui/tokens. It pairs with the Chassis React docs site, an Astro-based reference of live examples and API tables generated from the library's own TypeScript source.

Features

• Accessible by default: components are built on React Aria and React Stately, covering keyboard interaction, focus management, and ARIA out of the box.
• Token-driven styling: components render Chassis CSS markup and style themselves through its design tokens, so brand and theme changes apply without touching component code. The few pieces Chassis CSS doesn't style yet (the calendars and date pickers, DataGrid, Tree, Table's sort and selection UI, among others) ship their own CSS in @chassis-ui/react/style.css, built on the same tokens.
• Fully typed: written in strict TypeScript, with prop tables for the docs site generated directly from source via react-docgen-typescript.
• Tested and covered: a Vitest suite with coverage thresholds, server-render and hydration checks for every story, interaction tests in Chromium, Firefox and WebKit, and Storybook + Playwright visual regression for the families where pixels matter most (overlays, dates, carousel, tables and more; the rest are tracked in issue #45).

Getting Started

Installation

Requires React and React DOM 19:

npm install @chassis-ui/react @chassis-ui/css

Usage

import "@chassis-ui/css/dist/css/chassis.min.css";
import { Button } from "@chassis-ui/react";

function App() {
  return <Button color="primary">Submit</Button>;
}

A few pieces — the calendars and date pickers, TimeField, NumberField, SearchField, DataGrid, Tree, Notification's fade, Divider's label, Table's sort/selection UI and Progress's indeterminate bar — have no @chassis-ui/css visual equivalent, so @chassis-ui/react ships its own compiled stylesheet for just those pieces. Import it once alongside the @chassis-ui/css stylesheet above:

import "@chassis-ui/react/style.css";

Skipping this import doesn't error — those specific pieces will just render unstyled. Every other component is styled entirely through @chassis-ui/css and needs nothing extra.

Read the Getting Started guide for setup details, theming, and per-component usage.

Documentation

Component docs, live examples, and API reference are published at chassis-ui.com/react.

Running the docs site locally

This is a pnpm workspace monorepo — its own source, not the published npm package — so it's only relevant if you're contributing to Chassis React itself.

Prerequisites: Node 24 (the version in .nvmrc) and pnpm 10 or later.

git clone https://github.com/chassis-ui/react.git
cd react
pnpm install
pnpm start

Open http://localhost:4327/react/ in your browser.

Available scripts

Script	Description
pnpm start	Build the assets submodule, build the library, then watch the library and Astro site together
pnpm setup	Build the assets submodule at its pinned commit and build the library once — the part of start worth running on its own
pnpm dev	Watch the library and Astro site without rebuilding the submodule
pnpm site:dev	Start only the Astro dev server
pnpm site:setup	Build the assets submodule and the library, and generate API data
pnpm site:build	Build the static docs site and its search index
pnpm sync-submodules	Move the assets submodule to its latest commit; commit the new pointer on its own
pnpm site:preview	Preview the built docs site locally
pnpm react:generate	Re-generate prop table JSON from TypeScript source
pnpm new:component <kebab-name>	Scaffold a new component: source, barrel, exports, spec, story, docs page and sidebar entry
pnpm test	Run component tests with coverage
pnpm react:build	Build the component library

Chassis Ecosystem

This project is part of the Chassis Design System's multi-repository architecture:

Project	Description
chassis-website	Main website and shared documentation package
chassis-css	CSS framework and component library
chassis-react	React component library (this repository)
chassis-tokens	Design token generation and management
chassis-icons	Icon library and build toolkit
chassis-assets	Multi-platform asset management
chassis-figma	Figma component documentation

All documentation sites share the @chassis-ui/docs package for consistent layouts, components, and styling.

Contributing

1. Fork the repository
2. Create a feature branch from develop: git checkout -b feature/my-feature develop
3. Make your changes
4. Test the build: pnpm react:build && pnpm test
5. Commit your changes: git commit -m "feat: add my feature"
6. Push to the branch: git push origin feature/my-feature
7. Open a pull request against develop

Please read through our contributing guidelines for coding standards and development notes. Everyone participating in this project is expected to follow our Code of Conduct. Found a security vulnerability? Please don't open a public issue — see our security policy for private disclosure instead.

License

MIT License — see LICENSE file for details.