Case study

Vercel

We’ve been able to focus on building solid user experiences on top of Radix Primitives. With UI components, there are just too many angles and rabbit holes to cover for product teams that wish to move quickly.

Describe the type of project you are using Radix on?

We are using Radix on some parts of our design system, multiple mid to large size public and internal Next.js apps, marketing websites, and internal prototypes that we experiment with.

As you can tell, the projects vary. Some have only a few engineers primarily contributing, others have 20+ engineers contributing daily. Projects are also in very different stages. We have long-standing multi-year projects, but also experiments that may not see the light of day.

In what ways has Radix helped you and your company?

Radix has saved us a bunch of time on not re-implementing common UI from scratch. We’ve instead been able to focus on building solid user experiences on top of them. With primitives, there are just too many angles and rabbit holes to cover for product teams that wish to move quickly.

Our “primitives stack” before Radix was also very scattered. Some components were custom-built, with possibly poor accessibility coverage, others were from Reach UI, React Spectrum, or any other 3rd party. Today, it’s a lot easier for us to rely on Radix to be the vendor for all of our primitive needs. Knowledge is a lot more transferable between components and we possibly also save bundle size by not introducing new 3rd party dependencies along with its internal utilities.

What are your thoughts on Radix developer experience?

The DX is phenomenal. I love the documentation and API consistency between components. It’s great that you can learn a single component and also expect some of the nuances to carry on to others, à la forceMount, as, data-state . I think this is key to maintaining a solid user base. Folks will always come back because it’s already intuitive and works. Animations are a huge deal for me personally, so being able to easily throw an entry/exit CSS animation on top with little domain knowledge or external libraries is superb.

In some cases, I’ve found a few inconsistencies and bugs here and there, but the Radix team is always super responsive, proactive, and keen to provide temporary workarounds so I could be unblocked and move forward while they resolve. Sorry folks, nothing but praise to mention here 🙌

What are your thoughts on Radix docs?

Just played around with the latest version of the docs. It’s extremely well written with great examples that illustrate real-life use cases. It’d be neat to render the examples as well, similar to the hero. Now in hindsight, I don’t really need to use the documentation that often. Only to copy the starting code. The rest of the philosophies carry over from experience - using open and onOpenChange and such.

How has Stitches improved your developer experience and/or app performance?

We’ve used Stitches for an internal hackathon and parts of Next.js Live Mode. We’re still beginning to adopt it in our design system 2.0 rewrite.

Though, so far, Stitches has made it extremely easy for us to think in a tokens and variants approach. Enforcing the constraints of our design system through a solid, type-safe theme is key. You can’t build components or user interfaces without defining the underlying, foundational building units beforehand.

The css prop also made rapid prototyping super comfortable. I’d love to see static extraction in Stitches, though!

Rauno Freiberg

UI Engineer at Vercel

About

Vercel created Next.js, the world's favorite React framework, and is building the best tools and workflow for frontend development teams.

vercel.com

Founded

San Francisco, 2015

Next case studyAcid Tango
Submit your case studyTell us how you use Radix