Radix UI

radix-ui is the umbrella npm package for Radix Primitives, an open-source library of low-level, unstyled UI components for React — dialogs, popovers, dropdown menus, tooltips, tabs, accordions, and dozens more. Every primitive ships with correct WAI-ARIA behavior, keyboard navigation, and focus management built in, so teams can layer their own styling on top instead of reimplementing accessibility from scratch.

Rather than installing and importing dozens of individually-scoped @radix-ui/react-* packages, radix-ui re-exports the entire primitive set under namespaced imports (import { Dialog, Popover } from ‘radix-ui’), making it the fastest way to adopt the full library or incrementally add primitives to an existing design system.

What You Get

• Namespaced access to every Radix primitive (Dialog, Popover, Tooltip, Select, and 40+ more) via a single radix-ui import
• WAI-ARIA-compliant components with keyboard navigation, focus trapping, and screen-reader support built in
• Fully unstyled primitives with a composable Root/Trigger/Content API that layers cleanly onto any CSS or design system
• Controlled and uncontrolled component modes via a consistent useControllableState pattern across every primitive

Common Use Cases

• Building a custom design system’s interactive components (modals, menus, tooltips) without hand-rolling accessibility
• Adding accessible dropdown, dialog, or popover behavior to a Tailwind CSS or CSS-in-JS styled app
• Powering shadcn/ui-style component libraries that wrap Radix primitives with pre-styled variants

Under The Hood

Architecture - Radix Primitives is a pnpm monorepo where each component (dialog, popover, tooltip, accordion, etc.) lives as its own package under packages/react/*, built on shared low-level primitives: react-primitive (a polymorphic Slot-based base), react-context (scoped context creation via createContextScope), react-dismissable-layer, react-focus-scope, react-portal, and react-presence (animation-aware mount/unmount). For example, packages/react/dialog/src/dialog.tsx composes DismissableLayer, FocusScope, Portal, Presence, RemoveScroll, and aria-hidden to implement a fully accessible modal. The radix-ui package (packages/react/radix-ui) is a thin umbrella that namespace re-exports every individual primitive package (export * as Dialog from ‘@radix-ui/react-dialog’) under one import surface.

Tech Stack - Written almost entirely in TypeScript (96% of the codebase), the repo uses pnpm workspaces with a custom @repo/builder for dual ESM/CJS output, Vitest for unit tests, Playwright plus axe-core for accessibility-focused end-to-end testing, Storybook as the component development environment, Changesets for versioned releases, and oxlint/oxfmt for linting and formatting. React 16.8 through 19 are all supported as peer dependencies.

Code Quality - Each primitive package follows an identical, predictable file layout (src/index.ts, src/<name>.tsx, <name>.test.tsx, README.md, CHANGELOG.md) with substantial paired test coverage — dialog.tsx runs 568 lines against a 318-line dialog.test.tsx. Naming is consistent throughout (SCREAMING_CASE internal constants, createContextScope for scoped state, <Name>Element type aliases), and every exported prop is strongly typed.

API Design - Every primitive follows the same Root/Trigger/Content/Portal composition pattern, so learning one primitive transfers directly to the next. Controlled and uncontrolled usage is handled uniformly via useControllableState, and the radix-ui umbrella package removes the friction of installing dozens of separately-scoped packages by exposing everything through namespaced imports (Dialog.Root, Popover.Trigger, etc.) backed by extensive per-primitive READMEs and a dedicated documentation site.