Radix UI is an open source toolkit for building React interfaces, made by WorkOS. It includes Radix Primitives, unstyled and accessible low-level components; Radix Themes, a pre-styled component library you can import with no configuration; Radix Colors, a 12-step color system; and Radix Icons, a set of 15×15 icons. It suits frontend developers and design system teams who want accessible UI without building complex components from scratch.

• Accessible primitives: Components follow WAI-ARIA design patterns. They handle ARIA attributes, focus management, and keyboard navigation for you, so you don't have to build them yourself.
• Unstyled, open architecture: Primitives ship with no styles, and you can reach every component part. You can wrap parts, add event listeners, and pass props and refs to fit any styling approach.
• Radix themes: A pre-styled component library you add by importing one stylesheet and wrapping your app in a Theme component. You set the accent color, gray color, radius, and scaling with props.
• Live themepanel and playground: Drop in ThemePanel to preview theme changes in real time. A Playground lets you explore components before you commit.
• Radix colors: 31 color scales with 12 steps each, plus alpha variants. Text colors are guaranteed to pass APCA-based contrast targets, and you switch to dark mode by applying a class.
• Radix icons: Crisp 15×15 icons available as a Figma file, an SVG download, or React components from @radix-ui/react-icons.
• Typed, consistent API: The API is fully typed and consistent across components. The asChild prop lets you control which element renders.
• Incremental adoption: Install everything with npm install radix-ui or add single primitives like @radix-ui/react-dialog. The package is tree-shakeable, so you ship only what you use.

• Accessibility built in: Reviewers credit Radix with handling accessibility well out of the box, which removes a large class of focus and keyboard bugs from your app.
• Full styling freedom: Unstyled primitives fit any design system or CSS approach, so your product keeps its own look.
• Reliable complex components: Developers point to dependable modals and menus, plus thoughtful APIs that are easy to compose.
• Thorough documentation: The docs are detailed and focus on accessibility. That makes it easier to adopt components one at a time.
• Free and open source: You pay no license fee or subscription for the primitives, themes, colors, or icons.

• React only: Primitives and Themes are React packages. If your team works in Vue, Solid, or several frameworks, a multi-framework headless library like Ark UI fits better.
• Styling work with Primitives: Primitives ship with no styles. You have to design and style every component yourself unless you use Radix Themes or a styled layer such as shadcn/ui.
• Themes follows its own visual system: Radix Themes customizes through props like accent color, radius, and scaling. A brand that needs a very different visual style may find raw primitives easier to work with.
• Narrow icon format: Radix Icons are drawn on a 15×15 grid. If you need multiple sizes, weights, or a very large icon catalog, you may need a second icon set.
• Developer-focused tool: Radix is a code library, not a visual builder. Non-developers can't build interfaces with it unless they write React code.

• Building a company design system: Your team uses unstyled Primitives as the base for a branded component library. You get accessible dialogs, menus, and selects without writing focus and keyboard logic.
• Shipping a SaaS dashboard fast: You import Radix Themes, set an accent color and radius, and build screens like settings pages, invoice views, and KPI dashboards with ready-made components.
• Building accessible web applications: Product teams can use Radix components to implement WAI-ARIA interaction patterns for complex widgets. This reduces manual accessibility work, although the finished application still needs proper testing.
• Adding dark mode with accessible colors: You use Radix Colors scales to build light and dark themes. Text colors meet contrast targets, and you switch modes by applying a class.
• Upgrading parts of an existing app: You install single primitives such as Dialog or Tooltip and replace custom widgets one at a time. Tree-shaking keeps your bundle small.
• Prototyping in Figma and code: Designers use the Radix Icons Figma file while developers install the matching React icon components. Both sides work from the same icon set.