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:
All documentation sites share the @chassis-ui/docs package for consistent layouts, components,
and styling.
Contributing
- Fork the repository
- Create a feature branch from
develop: git checkout -b feature/my-feature develop
- Make your changes
- Test the build:
pnpm react:build && pnpm test
- Commit your changes:
git commit -m "feat: add my feature"
- Push to the branch:
git push origin feature/my-feature
- 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.
