A component library and Storybook, from scratch

The situation

The existing design system could no longer be maintained. Its Node and TypeScript versions had fallen far behind, and several attempts to upgrade it had failed.

What I built

• A new React component library organised by atomic design, so primitives, composites and page sections each had a clear home and a clear owner.
• Storybook as the workbench and the documentation site: every component developed and reviewed in isolation, with its states visible to designers and product people, not only engineers.
• Rollup builds published to NPM through an alpha, beta and production release pipeline, so consuming apps could try a change before it became everyone's change.
• Alongside it, I led the new Next.js homepage architecture and the React component layer for the Content Pages app.

The people side

After the CMS migration I split the team into a design-system stream and a content stream so the library had owners rather than visitors. I also mentored two co-op engineers through the work; one was hired full-time after the term.

What I would build today

This site carries a small version of the same idea, rebuilt with what I would choose now: tokens in one JSON file generated into CSS custom properties and a Tailwind theme, so the values in Storybook, in utilities and in plain CSS cannot drift; light and dark themes from the same tokens; and the Storybook accessibility addon checking every story. It is public at /storybook.