Radix allows us to build accessible and customisable components for our design system, without forcing us into a pre-defined style. This saves us a lot of time reinventing the wheel.
Describe the type of project you are using Radix on?
At the University of Amsterdam we’re completely rebuilding the student information portal. Because we can ignore all legacy code, we’re setting up a design system from scratch. This design system is still in its infancy but will be used across multiple student platforms. Our current team is relatively small, with only 2 front-end and 1 back-end developer.
In what ways has Radix helped you and your company?
Radix allows us to build accessible and customisable components for our design system, without forcing us into a pre-defined style. Radix is the perfect starting point for our design system, because most of the primitives line up with our exact needs. This saves us a lot of time reinventing the wheel.
What are your thoughts on Radix developer experience?
What we like the most about Radix is the fact that its developer experience is so fresh. It's not bloated by tons of components or conventions you should adhere to. It just provides a great set of primitive components that are easy to customise and easy to style to our own needs.
It was clear from the start that the developer experience was one of the main selling points for Radix. We use Typescript in combination with VSCode and the code suggestions Radix provides out of the box because of this make the API very easy to implement. We rarely need to re-read the documentation after implementing a primitive.
Another themeable React component library, Chakra UI, while great in its own way, became so bloated with its own rules and utils that I stopped recommending it.
Radix just provides you with logical props and straightforward typings. Each component is separately versioned which allows us to pick and choose which primitives we want to implement. We like the simplicity of this.
What are your thoughts on Radix docs?
The docs are great! They provide a great introduction and clearly show code examples for each primitive. I like the split between the ‘anatomy’ and a basic example.
Although I noticed some functionality or “best practices” are not always mentioned in the docs. This might be because they are still subject to change I can imagine. I used the Radix design system for more practical use examples of some components and some of the practices used in that repo would be welcome additions to the Radix documentation (E.g polymorphism in combination with Stitches).
How has Stitches improved your developer experience and/or app performance?
Stitches is the CSS-in-JS styling library I always wanted. It builds on the standard set by emotion and styled-components but improves the developer experience (and server side performance!) by a ton. Its both fast and easy to use and the variants API is well thought out.
Since Radix primitives are unstyled we can easily mix our own styled components from Stitches with styled Radix components.
In addition, the typing from Stitches is superb. Having VSCode auto-suggest design tokens from your custom theme is amazing.