Drew Bell is a designer and front-end developer who can help you with your next project.

Design Systems and Component Libraries

I’ve implemented, borrowed, and riffed on a bunch of different libraries in the course of building four or five iterations of Aboard, honing Retrium, shoring up treatment sheets at Instinct, and prototyping sites for many clients at Postlight (details here!). Here are some component libraries, design systems, and related tools I’ve used.

• Behavior React Aria hooks

  …provide bahavior for your custom components without having (too many) opinions about the actual markup or appearance. A lot of the component libraries lean on these hooks for accessible interactions.

• Primitives Radix

  …powers most of the rest, providing primitives that you can style and extend as needed.

• Components AlignUI

  …is a kinda-themeable set of components that has a bunch of design decisions baked in so you don’t have to spend a lot of time in Storybook or Figma before you start snapping pieces of UI together.

• Components shadcn/ui

  …does the same, but with fewer knobs for tweaking, more LLM-friendly docs, and a really unfortunate logo. It’s mostly Radix under the hood.

• Styling TailwindCSS

  …is a set of minimally-generated utility classes, if you’re not buying into their whole component ecosystem. It has the benefit of being customizable, widely supported by tooling, and easy to munge in React or Vue. Component libraries benefit from flat-specificity, hyperlocal style rules like this.

• Styling DaisyUI

  …is Tailwind-plus-opinions, a set of classes to use if you want a quick, themeable design system and don’t mind using their markup structure. It’s also baked into Phoenix these days.

• Foundation Plain ol’ CSS and HTML

  …are still great for component libraries! Especially since the wide adoption of CSS custom properties, you can --custom-stuff your way to a very tight, usable theme system.