case studies

42 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

CodeSandbox uses Radix Primitives for design system components

CodeSandbox uses Radix Primitives as the base for a number of their design system components. This design system is currently used in a beta project, with the intention to expand its use into their core product and marketing sites. Three developers are responsible for maintaining the design system.

Composer case study: incremental adoption of Radix Primitives

Composer adopted Radix Primitives incrementally, replacing old components one at a time without breaking changes. This approach was described as invaluable by the UX Developer at Composer.

Composer case study: Radix manages stacking contexts with portals

Radix Primitives manage stacking contexts using portals, which eliminated z-index wars at Composer. This was identified as the biggest advantage Radix provided to their product.

Composer case study: accessibility and code complexity reduction

Radix Primitives made Composer's product significantly more accessible and reduced code complexity, allowing the team to focus on building complex trading software rather than on foundational component concerns.

Composer case study: composing primitives with Tailwind CSS

Composing Radix Primitives to preferences and styling them with Tailwind CSS was described as straightforward. Implementing a primitive felt as easy as implementing an HTML element but with significantly more flexibility.

Compound uses Radix Primitives in their design system

Compound, a personal financial management solution founded in San Francisco in 2019, uses Radix Primitives to power their design system, which is leveraged throughout their client-facing application.

Compound benefits from Radix Primitives accessibility

By using Radix Primitives, Compound was able to focus on their product and clients' needs instead of implementing minute details and component accessibility themselves.

Compound values Radix speed and confidence for feature delivery

Speed and confidence to get features out the door were key reasons Compound adopted Radix Primitives.

Linear's adoption of Radix Primitives for their design system

Linear is using Radix Primitives for parts of their design system called Orbiter, which is used in Linear's web and desktop applications. They adopted several Radix primitives and plan to continue adoption to replace their current implementation of checkboxes, switches, radios, dialogs, and other components.

Accessibility compliance improvements from Radix Primitives at Linear

Linear reports that adopting several Radix primitives significantly improved their accessibility compliance and made their design system much more accessible.

Code complexity reduction from Radix Primitives at Linear

Linear found that using Radix primitives removed a lot of complexity from code and allowed them to focus on UI and UX.

Linear's appreciation for Radix's composability and modularity

Linear particularly appreciates that Radix primitives can be composed as desired or used to create more abstractions on top of them. They also value that Radix has separate NPM packages for each component, which keeps bundle footprint minimal and eliminates the need to care about tree-shaking optimizations.

Radix Primitives styling experience with styled-components at Linear

Linear uses styled-components with Radix Primitives and found the experience straightforward. A clear separation of styling and behavior in Radix allows creating different visual variations of a single component with ease.

Linear's experience with Radix documentation

Linear notes that Radix's documentation is well written with great examples that can be copied and pasted or played around with in Codesandbox with one click. They also appreciate having a clear and detailed Releases page.

Radix team support and community responsiveness at Linear

Linear reports that the Radix team is super responsive and helpful, providing ideas and workarounds for their Select implementation.

Liveblocks design system built on Radix Primitives

Liveblocks created a design system that relies on Radix Primitives, Tailwind CSS, and React. The system includes primitives such as colors, fonts, and shadows plus a selected set of components. It is used consistently across their marketing site, documentation site, and product dashboard, all running on Next.js.

Liveblocks components using Radix Primitives

Liveblocks uses Radix Primitives for Dialog, Alert Dialog, Menu, Context Menu, Scroll Area, Tooltip, and NavigationMenu components in their product.

Design system maintenance by Design Engineers

The Liveblocks design system was originally designed and set up by Steven Fabre, but is now maintained and improved by Design Engineers on their team.

Menu component accessibility benefits from Radix

Creating a custom menu component that behaves like native elements is difficult and time consuming. Native menu items can be infinitely nested, require screen real-estate consideration, and need typing to automatically select the first matching item. Radix Primitives handle these requirements well.

Radix Primitives development efficiency impact

Using Radix Primitives allowed Liveblocks to create high-quality custom UI that behaves like native elements without spending weeks on implementation, freeing the team to focus on their core product.

Radix modular installation approach

Radix Primitives can be installed individually, allowing developers to only add the components they need to their codebase. This made it easy for Liveblocks to convert components one at a time.

Radix unstyled components enable custom composition

Radix Primitives come completely unstyled, which enables developers to compose and style components the way they want, including using tools like Tailwind CSS.

NavigationMenu accessibility improvement

Marc Bouchenoire on the Liveblocks team converted their website main navigation to use Radix NavigationMenu to improve accessibility.

Magnetis case study: development time and accessibility

Magnetis, a financial portfolio management company, used Radix Primitives to create their website and components (built with Stitches). The development time decreased significantly with the assurance that components created are fully-accessible and thoroughly tested.

Node.js Web Design System uses Radix Primitives

Radix Primitives are crucial for the Node.js website and are a significant part of Node's Web Design System. They are used to include standard UX primitives such as Dropdowns and Dialogs into Node.js projects, and participate in critical aspects of how the community interacts with Node.js, including the complex download flow on Node.js's website.

Radix Primitives address cross-browser compatibility and accessibility

Radix Primitives handle the heavy lifting of cross-browser compatibility, accessibility, internationalization, and ensuring that standard components look and behave consistently across the vast amount of human interfaces that exist.

Radix Primitives improve accessibility in design systems

Radix Primitives provide vastly improved accessibility across components compared to building from scratch. They handle smaller accessibility details such as hitting Esc to close a dialog box and the distinction between components like Dialog and Alert Dialog, allowing developers to focus on styling and composing components rather than implementing accessibility features.

Supabase UI is a design system built with Radix Primitives

Supabase built a design system called Supabase UI comprised of atom-level components created with Radix Primitives. Supabase UI is used across all Supabase Next.js applications to maintain consistency across mediums.

Radix Primitives use separate NPM packages per primitive

Each Radix primitive is available as a separate NPM package, allowing developers to gradually introduce primitives into a UI library one at a time rather than replacing everything at once. This modular approach enables developers to pick and choose which primitives to use and potentially mix custom components alongside Radix Primitives.

Radix Primitives support flexible component composition

Radix Primitives allow flexible composition of components however developers want. Components built with Radix Primitives can expose individual parts in a UI library, providing flexibility similar to component libraries like Ant Design, and developers are not locked into default settings.

Radix Primitives work with any styling library

Radix Primitives can be styled using any styling library. Developers are not forced to use a particular styling approach and have flexibility in how they style the primitives.

Teamflow performance gains from Radix Primitives

Teamflow saw noticeable performance improvements immediately after adopting Radix Primitives, particularly when replacing modals and tooltips. The company's product mixes WebGL, WebRTC and React, making performance critical. Radix Primitives provided a fast and accessible foundation for their design system without performance overhead.

University of Amsterdam uses Radix for design system in student portal rebuild

The University of Amsterdam is rebuilding their student information portal from scratch and building a design system using Radix Primitives. The design system is in its early stages but will be used across multiple student platforms. The team consists of 2 front-end and 1 back-end developer.

Radix benefits for University of Amsterdam: accessible, customizable, no predefined style

Radix Primitives allow building accessible and customizable components for their design system without forcing a pre-defined style. Most primitives align with their exact needs, saving time on reinventing common components.

Radix developer experience: lightweight, fresh, easy to customize and style

The University of Amsterdam appreciates Radix's fresh developer experience because it is not bloated by excessive components or conventions. It provides primitive components that are easy to customize and style. TypeScript integration with VSCode provides helpful code suggestions out of the box, making the API easy to implement without frequently consulting documentation.

Radix advantages over Chakra UI: simpler, less bloated, logical props

Compared to Chakra UI, Radix is preferred because it is simpler and not bloated with its own rules and utilities. Radix provides logical props and straightforward typings without extra conventions to follow.

Radix allows picking and choosing primitives through separate versioning

Each Radix primitive is separately versioned, allowing developers to pick and choose which primitives they want to implement.

Radix documentation structure: anatomy and basic examples valued

The University of Amsterdam praises Radix documentation for providing great introductions with a clear split between 'anatomy' sections and basic code examples for each primitive.

Radix Primitives solves time investment in custom UI components

Radix Primitives save development time by eliminating the need to re-implement common UI components from scratch. Product teams can focus on building solid user experiences on top of the primitives instead of covering the many implementation angles and edge cases that come with custom component development.

Radix enables unified primitive stack across projects

Before adopting Radix Primitives, Vercel's component stack was scattered across multiple sources including custom-built components, Reach UI, React Spectrum, and other third-party libraries. Adopting Radix as the unified vendor for all primitive needs reduced cognitive load, made knowledge more transferable between components, and potentially reduced bundle size by eliminating redundant third-party dependencies.

Radix Primitives used across Vercel's product ecosystem

Vercel uses Radix Primitives across multiple types of projects including parts of their design system, multiple mid to large size public and internal Next.js applications, marketing websites, and internal prototypes. These projects range from small teams to 20+ engineers contributing daily and from long-standing multi-year projects to short-lived experiments.

Radix team provides responsive support and workarounds

The Radix team is responsive, proactive, and willing to provide temporary workarounds when users encounter inconsistencies or bugs, allowing developers to remain unblocked while the team resolves issues.

Give your agent this brain