Stop 19 · Frontend System DesignTopics · 5/13

Component Library

In short

When five teams each build their own button, you get five slightly different buttons. A component library gives everyone the same tested building blocks.

A shared, versioned set of UI components used consistently across one or more products — the backbone of visual and behavioral consistency at scale.

The jaadu tailor hands out identical violet school uniforms to a line of students.

Think of it like this

School uniform tailor

Every student gets the same fabric, colour and fit from one tailor, so the whole class looks consistent. A component library is that tailor for your UI: one place makes the buttons, inputs and modals, and every page uses them.

Watch it happen

One change, every screen

Tokens

Button

Checkout

Profile

color-primary

1/6The library Button reads its colours from design tokens.

The big ideas

What you need to know

Design tokens first

Tokens are named values for colours, spacing and fonts, like color-primary. Components use tokens, not random hex codes.

Documented with examples

Tools like Storybook show every component and its variants, so people can browse before building.

Accessible by default

Focus states, keyboard support and labels are built in once, so every screen gets them for free.

Versioned changes

If it's a package, use semver so a breaking change doesn't surprise other teams.

See it in code

Walk through the code

tsx

1type Variant = "primary" | "secondary" | "danger";2 3const styles: Record<Variant, string> = {4  primary: "bg-brand text-white",5  secondary: "bg-gray-100 text-gray-900",6  danger: "bg-red-600 text-white",7};8 9export function Button({ variant = "primary", ...props }:10  React.ComponentProps<"button"> & { variant?: Variant }) {11  return <button className={styles[variant]} {...props} />;12}

1/4A fixed list of allowed variants.

A fixed list of variants keeps the library in control of the look. Teams pick a variant instead of inventing their own colours.

Save yourself the pain

Common mistakes

Oops

Adding a new prop for every one-off request until Button has 25 props.

Do this instead

Say no to rare cases, or let people compose. A small, clear API stays easier to maintain.

Oops

Building a full in-house library before the product has found its style.

Do this instead

Start with a few core components, or build on accessible primitives like Radix, and grow from real needs.

Your mission

Start a mini library

~40 min

Quick check

Why do component libraries use design tokens instead of hard-coded colours?

Go deeper

1Extract 3-5 truly reusable components from a project into a separate shared folder or package.
2Document each component's props and usage with a tool like Storybook.
3Read how a design system connects design tokens to your component library.