zoom_in Click to enlarge

Radix UI

▲ ▼

language

description Radix UI Overview

Radix UI is a library of headless, accessible components for building high-quality web applications. It provides the logic and accessibility features (like keyboard navigation and screen reader support) for complex elements like Dialogs, Popovers, and Accordions without imposing any styles.

This allows developers to build fully custom designs while ensuring that the underlying functionality meets WCAG standards. It is a favorite among design systems engineers who need total visual control.

help Radix UI FAQ

Does Radix UI include finished styling?

Radix Primitives are intentionally unstyled, so developers supply their own CSS or styling system. Radix Themes is a separate styled component layer for teams that want a more complete visual foundation.

Why does a Radix Dialog render outside my component tree?

Dialog content is commonly mounted through a Portal so it can sit above surrounding layout and avoid clipping by parent containers. The dialog still manages focus, Escape-key behavior, and accessibility semantics through Radix's React components.

Can Radix UI be used with Tailwind CSS?

Yes, Radix exposes component state through attributes such as data-state, which Tailwind selectors can target. Libraries including shadcn/ui use Radix primitives as accessible behavior beneath customized Tailwind styling.

What is the difference between Radix UI and Headless UI?

Both provide accessible behavior without forcing a full visual design. Radix offers a broad set of granular primitives such as Tooltip, Popover, Toast, and Menubar, while Headless UI is closely associated with Tailwind Labs and covers a different component set.

swap_horiz

Looking for Radix UI alternatives? Compare top competitors ranked & scored

arrow_forward