Radix Design System

Free
Dark Mode, Design Tokens

Download the WorkOS Radix Design System

Design teams, you can access the WorkOS Radix Design System today. Consequently, you build incredibly accessible and high-quality web applications faster. Use the official Figma kit and React primitives, which include seamless dark mode support. For more enterprise-grade design systems, view the official WorkOS Radix documentation.

Access the Official WorkOS Radix Design System

Welcome to the largest, most comprehensive library of code-backed design systems for Figma. Here, you get instant, free access to the powerful WorkOS Radix Design System. Therefore, product design and development teams consider this open-source toolkit essential. It prioritizes developer experience, composability, and uncompromised accessibility. WorkOS developed and maintains Radix. World-class teams like Vercel and Node.js trust this system to build high-quality web applications efficiently.

Radix: Unstyled Primitives Power Your UI

The WorkOS Radix Design System focuses on providing unstyled, low-level components. We call these elements Primitives. In fact, they deliver robust functionality and state management right out of the box. This approach gives product teams total control over the visual presentation and architecture. Your app will never suffer from a generic look or “library fatigue.”

The library includes crucial components like Dropdown Menus, Popovers, and Dialogs. Furthermore, all components are battle-tested. They meet the complex WAI-ARIA guidelines completely. You can effortlessly integrate these unstyled components with any styling solution. This includes plain CSS, Tailwind CSS, or a sophisticated CSS-in-JS library. This flexibility allows your team to maintain a unique brand identity. Moreover, you leverage a professional, accessible foundation for interactive UI elements. The modular, composable architecture of Radix means you can adopt components incrementally. You just add them as your project needs them.

 

Seamless Design Handoff from Figma to Code

Designers will appreciate the included Figma UI kit. Crucially, it provides a complete visual counterpart to the React code. This ensures a seamless handoff between design and engineering. It drastically reduces communication overhead and design drift. You confidently use the Figma components. Why? Because you know their coded counterparts handle full keyboard navigation and screen reader support. They also manage comprehensive focus management. Accessibility is not an afterthought; the core structure of every primitive builds it in.

Developers can also explore Radix Themes. This styled component library builds on top of the same Primitives. However, the core WorkOS Radix Design System (Primitives) offers the deep customization needed for complex, branded applications. Choosing this system means committing to performance-optimized, high-quality primitives. This product empowers developers. As a result, they ship better products faster, without spending months solving common interaction challenges.

Show your support! Buy our team a coffee!

X

Sign In

Register

Reset Password

Please enter your username or email address, you will receive a link to create a new password via email.