Chapter 1: Introduction

Core Idea

Radix Primitives is a low-level, unstyled React component library focused on accessibility and composability — it implements the hard, easy-to-get-wrong parts of common UI patterns (accordion, dialog, dropdown, select, tooltip, etc.) so you don't have to.

Key Concepts

• Accessible: components follow WAI-ARIA design patterns; ARIA/role attributes, focus management, and keyboard navigation are handled internally.
• Unstyled: components ship with zero built-in styles — you own the look and feel completely.
• Open: granular access to each component part lets you wrap parts and add your own refs/props/listeners.
• Uncontrolled by default: components work without local state wiring, but every stateful part also accepts controlled props.
• asChild prop: lets you swap the rendered DOM element while keeping the primitive's behavior (see Composition chapter).
• radix-ui package: the recommended single-package install; individual @radix-ui/react-* packages remain available for granular installs.

Code Examples

npm install radix-ui

import { Dialog, DropdownMenu, Tooltip } from "radix-ui";

• What it demonstrates: the recommended incremental-adoption install — one tree-shakeable package, import only what you use.

Key Takeaways

1. Radix exists because native HTML/WAI-ARIA implementations of complex widgets are inconsistent or missing — Radix standardizes them.
2. Prefer the single radix-ui package over per-primitive packages to avoid version drift between primitives.
3. Every part is designed to be wrapped, restyled, and recomposed — this is a toolkit, not a finished design system.

Connects To

• Styling guide: Radix's unstyled-by-design philosophy is expanded there.
• Composition guide: the asChild prop introduced here is covered in depth.