Skip to main content

Mini Design System & Component Library

Build a 12-component design system with Storybook, design tokens, and proper accessibility. Senior-level portfolio asset.

React 18TypeScriptStorybookVitestTailwind CSSRadix UI

About this project

Design systems are how teams ship UI consistently at scale. This project teaches the underrated craft: API design for components (controlled vs uncontrolled, polymorphic types), design tokens, theming with CSS variables, and the documentation rigour that makes a system actually adoptable. You will ship 12 components (Button, Input, Modal, Tooltip, Toast, Select, Tabs, Drawer, Card, Avatar, Skeleton, Table), each with Storybook stories, unit tests, accessibility annotations, and a public docs site. This is the portfolio piece that gets you senior interviews.

Why build this in 2026?

Design systems are the leverage layer for AI-assisted frontend work — clear component APIs let AI coding assistants ship features faster.

What you'll ship

  • Public GitHub monorepo
Published Storybook (Chromatic, Vercel)
NPM package (even if private to test

Sign up to see the full project brief

Full deliverables, success criteria, and AI Career Tutor support — free.

You'll unlock:Complete project brief, AI tutor that knows this project, and progress tracking when you start.

Skills you'll practice

reacttypescriptaccessibilityjest