I am building a component library!

So as an excercise in a lot of things I have decided to write a component library for the web. My goal is to make it 100% accessible, while still looking really cool. I intend to use the following technologies and tools in order to try to make it as modern and good as possible, and simultaneously learn as much as I can:

Let's take a quick look at why I 've chosen these (other than the fact that I want to learn them).

Web components

I want this library to be as easy to use as possible, and also I want it to be usable regardless of you want to drop it in a plain static web page, or use it in a JS framework. The clear choice, therefore, seems to me like Web components. This collection of APIs has good support nowadays, and can also be polyfilled. And I only have to write each component once.

Storybook

I have used Storybook for simlilar things before and I really like it. But I have never had the opportunity to make each story really shine and be as useful as it possibly can be. I want to try to make this here. Storybook has also undergone a lot of changes lately, so it will be nice to get up to date on this.

Cypress

I use Cypress almost every day working at my current customer, but we only use it for rather heavy end-to-end tests. My idea is that Cypress could work rather beautifully together with Storybook when it comes to integration testing. I suspect that I will need additional kinds of tests in the end to ensure top quality, but more on that in the future.

pnpm

For my package manager I will use pnpm. I seems like npm but better. So why not? Time will tell if this causes any problems.

Look and feel

A very important point of course, exactly what will this libarary look like? Will it be another clean, modern Tailwindy kind of thing? No. Not quite. Here's a hint...

Classic smiling Mac icon

Follow along!

I will write a detailed post about every step on the way and share all that I learn during the journey. So check back on this blog regularly, or use the sites RSS feed to get automatic updates. I will also post all updates on my Twitter.