Hi, I'm Courtney! I'm a North American wife, mom and UX engineer.

I love video games where you farm stuff.*

All opinions are my own, and do not reflect the attitudes of the company I work for. They know better.

* No, not Farming Simulator, sorry.

© 2009 – 2022 Courtney Cloudman

Headless components in React and why I stopped using a UI library for our design system


This article very much reflects my own thoughts on design systems, regardless of framework - React, Vue, whatever else.

I've worked on internal or B2B projects my whole career, and I'm usually working on something that can't be assembled entirely from third-party components - or at least not nicely. So when a design system is needed, I'm usually left underwhelmed by third-party options. I need something that makes it easier to build custom components, not something that does all the basics for me and then leaves me on my own to do the hard stuff.

The end result is a library where all the core stuff (colors, dark mode, spacing, fonts, etc.) and the simpler components (buttons, badges, pre-made grid layouts, etc.) are done from scratch, while the tricky stuff (dropdowns, charts, data grids) are the best well-supported open source libraries we can find. There's certainly more up-front work, but I've been thankful every time this approach was taken: with the system put together, building good custom components could not be easier.