Component Libraries

Component libraries

How do you eat an elephant? One piece at a time. These two pages show how real teams split big products into small components, and the programming ideas that make it work: abstraction, modularity, dependencies and decoupling. Each page puts two design systems side by side, so you see every idea answered in two different ways.

Close to home · Iceland

Hanna and Ísland.is

Hanna · Reykjavík City Ísland.is · Digital Iceland

The design systems behind Reykjavík's websites and island.is. Both publish their components in Storybook, but Storybook hides the interesting part. This page follows one button all the way down: where the CSS comes from, where the imports point and how the colours are stored.

What you can try

You'll see one problem solved in opposite ways. Hanna's contract is CSS class names, Ísland.is's is React components.
There's a colour picker that changes a token live, if you want to feel the difference between a CSS variable and a value baked in when the app is built.
If you feel like getting your hands dirty, there's a five-minute exercise that only needs a browser, and a longer one that rebuilds the Ísland.is setup in Vite.
It's also a peek at the code behind Icelandic public websites, the kind you might meet working for the city, the state or the agencies that build for them.

A quick read, or an hour if you try the exercisesLight only, like Hanna and Ísland.is themselves

Open Hanna and Ísland.is

Further away · The world

Carbon and Material UI

Carbon · IBM Material UI · Google's Material Design

IBM's design system, and the most used React library built on Google's Material Design, downloaded millions of times a week. The same ideas at a much bigger scale, with libraries you can install in your own project today.

What you can try

The real Material UI library runs inside the page, so you can watch it write CSS in your browser as you change the theme.
You can switch Carbon between its four themes, one class at a time, and see why tokens make dark mode easy.
If you're curious about modularity, an exercise shows the same page building to 1.2 MB of CSS or 130 KB, depending on what you import.
There are real dependency stories too: a Sass update that broke Carbon's build on the day we tested it, and a well-known library that was retired.

A quick read, or an hour if you try the exercisesFollows your device's dark mode

Open Carbon and Material UI

Ways to play with the pages

These pages are extra material for the guide. Read as much or as little as you like, and pick whatever looks interesting. Some people find the Icelandic page an easier place to start.

Re-skin the page

The buttons at the top of each page show the whole page in another design system. If you're curious how that works, “See the CSS” shows the exact rule.

Play with the demos

Under “Change it in one place” there are colour pickers for both systems. It's fun to compare what happens in the browser.

Try an exercise

Every step was tested and has a copy button, so you can follow along on your own computer whenever you feel like it.

Talk it over

The last exercise on the Carbon and Material UI page has questions comparing all four systems. They make a good chat with your group, if you're in the mood.

The same ideas, on both pages

The problems a component library solves

Dividing the work between the people in a group
Knowing where to start on a big project
One piece at a time instead of one huge project
Consistency, and changing something in one place

The programming ideas underneath

Abstraction: hiding the details behind a simple surface
Modularity: separate parts you take only when you need them
Dependencies: what each part needs, and what breaks
Decoupling: changing one part without breaking the rest

Both pages end with why this matters more now that AI writes so much code: an AI assistant gives you generic components, and knowing your own product is what turns them into the right ones.