<Youssef Mahmoud />
Back to Work

frontend · 2023

Next.js Component Library

Zero-runtime design system with 60+ accessible components, Storybook docs, and automated visual regression testing.

ReactTypeScriptRadix UIStorybook

Overview

A zero-runtime design system with 60+ accessible components built for internal use across multiple Next.js projects — then open-sourced after it proved its value by eliminating design drift across 8 separate codebases.

The Challenge

Without a shared component contract, the same UI patterns were being reimplemented differently across every project. Button variants, form states, and modal behaviors diverged over time, making cross-project consistency impossible and code reviews slow.

Key Features

  • 60+ accessible components built on Radix UI primitives
  • Full Storybook documentation with live examples
  • Automated visual regression tests on every PR
  • Dark and light theme tokens via CSS custom properties
  • Tree-shakeable bundle — zero unused CSS shipped

Tech Stack

React

Component architecture with compound component patterns

TypeScript

Strict typing for all component props and variants

Radix UI

Accessible primitives as the behavioral foundation

Storybook

Interactive docs and visual regression test runner

Results & Impact

Components shipped60+
Accessibility score98/100
Projects using the system8 codebases
Bundle runtime CSS0kb

Get in Touch

Let's Build Something Scalable.

Currently taking on select projects through my agency and exploring innovative collaborations.

Next.js Component Library | Youssef Mahmoud