Introduction

@chassis-ui/react provides the interactive building blocks for a Chassis UI application — form controls, overlays, navigation, and layout primitives — written in TypeScript and built on react-aria/react-stately for accessible-by-default behavior. This page covers installing the package, importing components, and wiring up the companion stylesheet each one renders against.

Installation

Npm

npm install @chassis-ui/react

Yarn

yarn add @chassis-ui/react

Installation is the same regardless of build tool — Vite, webpack, Next.js, Remix, and similar all resolve @chassis-ui/react as a normal package, with no bundler-specific configuration of its own to add.

Using components

import { Button } from '@chassis-ui/react'

Subpath imports

Every component family is also published as its own entry point, named after its folder in the package — button, text-input, table, datepicker, and so on:

import { Button } from '@chassis-ui/react/button'
import { TextInput } from '@chassis-ui/react/text-input'
import { Modal, ModalBody, useModal } from '@chassis-ui/react/modal'

A subpath brings in only that family's code and the react-aria hooks it actually uses. Prefer it on size-sensitive routes, especially under Next.js's Turbopack, which can't tree-shake unused exports out of the root entry (see Server-side rendering). Both styles resolve to the same modules, so mixing them in one app is safe.

Stylesheets

React components are styled with the @chassis-ui/css library.

Install chassis-css

npm install @chassis-ui/css

or

yarn add @chassis-ui/css

Basic usage

import '@chassis-ui/css/dist/css/chassis.min.css'

A project that builds its styles with Tailwind CSS uses the Tailwind entry of @chassis-ui/css instead, and adds two lines for the classes the components render: see Tailwind.

Component-specific styles

A handful of components — Calendar, RangeCalendar, DatePicker, DateRangePicker, TimeField, DataGrid, Divider's label and vertical line, Notification's fade, NumberField's step buttons, Progress's indeterminate bar and Table's sort/selection UI — 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.

Wider Chassis ecosystem

@chassis-ui/react is one package in a set that shares the same design system:

• @chassis-ui/css, above, is the styling foundation every component's class names target.
• @chassis-ui/tokens compiles the color, spacing, radius, and typography values @chassis-ui/css declares as --cx-* custom properties — re-theming a brand or switching light/dark mode happens at this layer, not in @chassis-ui/react. See Theming for the supported override surface.
• @chassis-ui/icons is the source of the SVG sprite (or icon font) <Icon> renders by name — every icon-carrying component in this library, from CloseButton to the calendar navigation, composes <Icon> internally rather than inlining its own markup.

None of these are peer dependencies of @chassis-ui/react — nothing errors if the application never installs them — but component output assumes their conventions: unstyled markup without @chassis-ui/css, default token values without @chassis-ui/tokens, and empty icon references without an icon sprite reachable at the path <Icon>'s sprite prop points to.