Skip to content
Projects

Design System & Component Library

A typed React component library and docs site shared across three product teams.

role
Maintainer
period
2022–2023
TypeScriptReactAstroDocker
Docs

Problem

Three teams were shipping visually inconsistent UIs and re-implementing the same inputs, modals, and tables. Accessibility was an afterthought and varied by team.

What was built

  • A React component library with a strict TypeScript API, headless behaviour hooks, and tokens driving colour, spacing, and typography.
  • Accessibility baked in: focus management, ARIA wiring, and keyboard support tested with automated and manual checks.
  • A documentation site (built with Astro) with live examples, props tables generated from types, and usage guidelines.
  • A release pipeline with changesets, visual regression tests, and a canary channel.

Outcome

New screens were assembled from library parts in a fraction of the previous time, and the three products converged on one look and one set of interaction patterns.