---
title: Radix UI
date: 2025-01-25T14:22:13.000Z
url: https://www.radix-ui.com/
thumbnail: /images/uploads/radix-ui.webp
category:
  - UI Frameworks
tags:
  - ReactJS
  - UI Components
  - Accessible Design
  - headless UI
  - primitives
  - WAI-ARIA
  - design system
---
Radix UI is an open-source React component library of accessible, unstyled UI primitives — WAI-ARIA compliant, fully customizable, and performance-optimized for production-grade design systems.

## What is Radix UI?

[Radix UI](https://www.radix-ui.com/) is a collection of low-level, unstyled React primitives for building accessible, high-quality user interfaces. Unlike opinionated component libraries, Radix UI gives you full control over styling while handling all the complex accessibility logic — keyboard navigation, focus management, ARIA attributes — out of the box.

It is the foundation used by popular design systems including [shadcn/ui](/resources/shadcn/) and [Origin UI](/resources/origin-ui/).

## Key Features

- **Accessible by default** — Every component adheres to WAI-ARIA design patterns, ensuring inclusivity for all users including those using screen readers
- **Unstyled primitives** — Ship with zero styles, so you can apply any design system or CSS framework (Tailwind, CSS Modules, styled-components)
- **Composable API** — Fine-grained component parts (Root, Trigger, Content, etc.) that you compose to build exactly what you need
- **Animated-ready** — Built to work with CSS animations and libraries like Framer Motion
- **TypeScript first** — Full TypeScript support with accurate types

## Available Components

Radix UI primitives include:

- Dialog, Drawer, Alert Dialog
- Dropdown Menu, Context Menu, Navigation Menu
- Tooltip, Popover, Hover Card
- Select, Combobox, Radio Group, Checkbox, Switch
- Accordion, Tabs, Collapsible
- Slider, Scroll Area, Separator
- Toast, Progress, Avatar, Aspect Ratio

## Why Choose Radix UI?

Radix UI solves one of the hardest UI engineering problems: accessibility. Instead of building dropdown menus, dialogs, and tooltips from scratch and getting keyboard interactions wrong, Radix handles it all correctly while you focus on visual design.

It's the go-to choice for teams who want design freedom + accessibility compliance without maintaining their own accessible component logic.

## Radix UI vs. Alternatives

| | Radix UI | shadcn/ui | Origin UI |
|---|---|---|---|
| Styled? | ❌ Unstyled | ✅ Tailwind | ✅ Tailwind |
| Accessible? | ✅ Yes | ✅ Yes | ✅ Yes |
| Customizable? | ✅ Full | ✅ High | ✅ High |
| Based on Radix? | — | ✅ Yes | ✅ Yes |

## Related Resources

- [shadcn/ui](/resources/shadcn/) — Tailwind-styled component library built on Radix UI
- [Origin UI](/resources/origin-ui/) — Beautiful React + Tailwind components
- [Tremor UI](/resources/tremor-ui/) — Dashboard UI components for React