CodeRabbit Design System: Building the NPM Package That Set the Standard
Designed and built an internal NPM package end-to-end to standardize components, utilities, and theming across a multi-repo organization.
Suyank Saraswat
Builder at Exploring
From their time as
Builder
Results • 2024
Overview
CodeRabbit brought Suyank in on contract with a specific mandate: the codebase had grown unwieldy as the engineering team scaled, with too many engineers making independent decisions on shared components, utilities, and styling. The result was inconsistency across repos and a growing maintenance burden.
The Story
CodeRabbit brought Suyank in on contract with a specific mandate: the codebase had grown unwieldy as the engineering team scaled, with too many engineers making independent decisions on shared components, utilities, and styling. The result was inconsistency across repos and a growing maintenance burden.
Suyank's solution was to extract the shared layer into a single internal NPM package. He designed and built the package end-to-end, covering shared UI components, common utility functions, compressed SVGs, and a centralized theme with CSS variables. By centralizing the theme, any variable change propagated across the entire organization rather than requiring updates in each individual repository.
A key design decision was access control. The package needed to be internal-only, with a clear process for proposing and approving changes rather than allowing any engineer to push a new version directly. Suyank set up a GitHub Actions pipeline so that once a PR was approved and merged into the design system repo, deployment happened automatically.
He handed the package off with full documentation, giving the broader engineering team a clear path for integration and a defined process for requesting changes. The package was fully optimized and gzipped to minimize bundle impact on consuming repositories.