Northstar UI
Accessible React design system
A React and TypeScript component library for SaaS dashboards and complex web apps — around 40 accessible, theme-able components built on design tokens, with composable APIs and full Storybook documentation.
Design, architecture, and implementation
Product teams kept re-litigating spacing, colour, focus behaviour, and keyboard interaction on every screen. Northstar UI exists so they don't have to — it is engineering documentation, not a marketing page.
- Accessibility is the baseline, not a feature: every component ships with correct roles, names, states, keyboard support, and focus management, preferring native elements over ARIA.
- Composition over configuration: components expose small, predictable APIs and split into subcomponents (Card.*, Tabs.*, Table.*) rather than growing prop lists.
- Tokens, not magic numbers: colour, spacing, radius, type, motion, and elevation all come from CSS custom properties — structural tokens stay fixed while colour tokens drive theming.
- Predictable state: stateful components follow one controlled/uncontrolled contract via a shared useControllableState, so value / defaultValue / onChange behave the same everywhere.
- Documented and verified with Storybook and Chromatic visual regression, released through CI.