Case study

Supabase

Radix has quickly become the foundation of many of our components. The biggest advantage we see here is vastly improved accessibility across anything we’ve used it for.

Describe the type of project you are using Radix on?

We have a design system called Supabase UI which is comprised of ‘atom’ level components that can be used together to create repeatable UI patterns that you see in lots of modern web applications. Supabase UI is used across all of our Next.js applications, and it has become a useful tool to keep things consistent across all our mediums.

Currently, we only have a few developers contributing internally to our UI library—plus a few open source contributions—but we will probably see more developers working on it simultaneously soon.

In what ways has Radix helped you and your company?

Radix has quickly become the foundation of many of our components. The biggest advantage we see here is vastly improved accessibility across anything we’ve used it for. The opposing strategy to this is to build components from scratch; anyone who has done this will know all too well the smaller accessibility details such as hitting Esc to close a dialog box, or the confusion between, let’s say, a Dialog and an Alert Dialog. All of these concepts are handled by Radix primitives, so we are essentially just left with the more pressing job of styling and composing the components in the way that we like.

What are your thoughts on Radix developer experience?

It’s been great introducing components one at a time into our UI library. Obviously we couldn’t just replace everything all at once, but Radix has made it easy by having a separate NPM package for each primitive. Anyone looking to build a UI system could even pick and choose what they wanted to use, and maybe even use their own custom components alongside Radix. There is also room to compose components however you want. Some of our components in Supabase UI are more reminiscent of how Ant Design works, but with Radix, it has been simple to expose the parts we needed in our own UI library, so you'll never be stuck with just a default setting.

What are your thoughts on Radix docs?

The docs are amazing, we especially love the examples! Although the examples use a heavy amount of Stitches examples—something we don’t use in Supabase—it’s worth noting that you can style the primitives using whatever styling library you like. You’re never stuck with being forced one way or another.

Jonathan Summers-Muir

Design + Code at Supabase

About

Supabase is a backend-as-a-service startup that automatically handles the behind-the-scenes work for developers.

supabase.io

Founded

Singapore, 2020

Products

Primitives

Submit your case studyTell us how you use Radix