Introducing the Strum Design System for React

Photograph of Colin Hemphill taken in his office
Written by Colin Hemphill
September 11, 20224 min read

The views expressed on this blog are my own, and do not necessarily reflect those of my employer.

The Strum logo is white text on a dark neutral background with oscillating instrument strings

Today I'm happy to announce my new open-source project called Strum, which is available as version 1.0.0 right now!

npm i @strum/react

You can read a little about the story behind Strum here on the blog, or get started right away by checking out the documentation website or visiting the GitHub repo.

What is Strum?

Strum is a design system that primarily consists of accessible React components, base styles, design tokens such as colors and spacers, and atomic classes that allow you to use these styles in your app. It's built to have interchangeable light and dark modes, so if you use Strum's design tokens to style your custom components, you can be certain that the components are going to look great when you switch color schemes.

It's built with a number of technologies, but one of its defining features is that it is styled with Vanilla Extract, a zero-runtime TypeScript styling solution. This also gives Strum access to atomic styles using Sprinkles. Your components can take on sizes, colors, font varieties, and many other styles using either a simple vars object, or by using a primitive <Box /> component that takes design tokens as props.

You can use Strum in any React environment by just loading in a single CSS file and importing whichever components you want, but if your application already uses Vanilla Extract, you can take advantage of Strum's features in your own .css.ts files.

Why a new design system?

There are so many great design systems and component libraries available, so why did I decide to tackle this on my own with far less time and fewer resources? The main reason is honestly my obsession with Vanilla Extract. As a styling solution, zero-runtime styles with a TypeScript preprocessor is where I want to live for the foreseeable future. Alongside Tailwind, I think it's one of the only options that has a chance at surviving long-term, avoiding the performance problems of CSS-in-JS and also the DX problems of simple preprocessors. On paper I think Tailwind is great, but in practice I don't enjoy using it.

Because I've chosen to align with Vanilla Extract as my preferred styling solution, I started refactoring all of my personal sites to use it. Along the way I ended up with a pretty nice folder of components and atomic styles that worked for multiple websites, and the name of that folder was strum-design-system. The idea for breaking Strum into its own installable system was simply that I didn't want to maintain clones of that folder in multiple repos. As you can probably imagine, turning a personal component library into something that everyone can use was a major undertaking that ate up quite a few weekends.

There are a few design systems built with Vanilla Extract, such as Braid and degen, but they weren't exactly what I was looking for in terms of look and feel. Strum started as a fork of degen and shares much of its architecture, but components and styles were essentially created from scratch.

Priorities

Accessibility is perhaps my highest priority while building Strum. The library is a bit opinionated on styles and required props in order to enforce better practices, so I'm always looking for feedback on what's working and what's not working for users. If you see accessibility requirements that could be improved, I'll always treat these with the highest priority on our GitHub issues.

I think Strum looks amazing, but I'm willing to compromise on how it looks in order to make components as accessible as possible. After that, my focus will be on improving end user performance by trimming fat and making smarter architecture choices. I think the developer experience is pretty solid, but this is something I'll keep looking into, especially the <StrumProvider /> architecture which enables light/dark modes and accent color selection.

What's next?

There are more components that are on my roadmap for version 1.1.0. Most of all, I need to round out my form components with radios and checkboxes to make the library truly viable. From there I'll keep poking away at optimizations to improve performance, fixing any bugs that come up, and maybe one day I'll actually start using the library on this website 😅

One day I'd also love for a developer to be able to pass in their own CSS variables according to Strum's theme contract, which would enable fully customizable color schemes and design tokens like spacers. This might be more of a 2.0 goal, however!

Design System
Strum
Vanilla Extract