Shared UI Component Library

One design system across 3 products — visual regressions caught in CI, not production.

Built a fully accessible, themeable React component library published as an internal npm package. CSS custom properties + design tokens for theming. Peer-dep React to avoid bundle duplication. Automated visual regression via Chromatic + Storybook. Tree-shakeable named exports shrank consumer bundles by ~35%.

3 teams shipping visually inconsistent UI — buttons had 6 variants across products

Highlights

• Design token architecture: CSS custom properties for color, spacing, radius, and typography — single token swap changes the entire theme without touching component code.
• Accessibility baked into primitives: focus-visible polyfill, ARIA roles on composites (listbox, combobox, dialog), keyboard nav on all interactive elements — WCAG 2.1 AA baseline.
• Storybook + Chromatic for visual regression: every PR runs pixel diffing against the approved baseline; broken snapshots block merge.
• Published as a scoped internal npm package with strict semver: breaking changes require a major bump and a migration guide — no silent API drift.
• Named exports + sideEffects: false in package.json enabled tree-shaking; a typical consumer page importing 8 components pulled ~35% less CSS/JS than before.

See full portfolio: https://portfolio.kunal-gautam-570.workers.dev