Radix UI (Primitives)

Radix exists because of a specific, expensive embarrassment: the accessible dropdown menu. A menu that opens on click is an afternoon of work. A menu that traps focus correctly, closes on the right keys, positions itself against the viewport edge, restores focus on close, and announces itself properly to a screen reader is a project, and most teams that attempt it ship something that fails an audit anyway. Radix Primitives is that project, done once, in public, and given away under MIT.The design decision that makes it work is the parts model. A Dialog is not a black box with forty props; it is Root, Trigger, Portal, Overlay, Content, Title, Description, and Close, composed in your markup, each rendering one DOM element you can ref, style, and attach handlers to. Wrapping it in your own Dialog component with your own narrower API is the intended use, and the documentation says so outright: the primitives are low-level enough that teams are expected to introduce their own high-level layer. Controlled and uncontrolled modes are both first-class, which is what lets the same primitive serve a quick settings menu and a fully state-managed command palette.Accessibility is the claim to check, and Radix makes it checkable. Each component's documentation names the WAI-ARIA pattern it follows and the keyboard interactions it implements, so an auditor can compare behaviour against the pattern instead of against a marketing sentence. Focus is fully managed and customisable, dismissal and layering behaviour are configurable, and popper-based components handle collision with the viewport rather than overflowing it. None of this is visible in a screenshot, which is precisely the point: the value is in the interactions nobody photographs.The costs are structural, not incidental. Unstyled means unstyled: a Select is a behaviour with a DOM structure until your team styles the trigger, the portal content, the scroll buttons, the highlighted item, and every state between. Budgeted honestly, adopting Radix means funding a styled wrapper layer and its maintenance, which is why the ecosystem's most popular way to consume Radix is through a pre-styled collection built on it. The second cost is scope: React only, web only. A multi-framework platform team gets a behaviour reference, not a shared library.Bottom line: choose Radix Primitives when a React product's interactions are complex enough to fail audits, the team wants permanent ownership of its visual layer, and the CSS budget is real. If any of those three is missing, start from a styled system and keep Radix as the standard its behaviour is measured against.