Skip to main content

Radix UI

Overview​

Radix Primitives are unstyled, accessible React components for dialogs, dropdowns, tabs, tooltips, and more. They handle focus management, ARIA, and keyboard interactions so you can layer your own design system or pair them with Tailwind / CSS modules.

Key concepts​

  • Primitives not themes — You own visual design; Radix owns behavior.
  • Composition — Slot-like parts (Trigger, Content, Portal).
  • Controlled vs uncontrolled — State props mirror React form patterns.
  • Portal rendering — Overlays escape stacking contexts correctly.
  • Accessibility first — Test with keyboard and screen readers after styling.

Dialog open/close sequence​

Sample: minimal dialog (React + Radix)​

import * as Dialog from '@radix-ui/react-dialog';

export function Example() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/40" />
        <Dialog.Content className="fixed left-1/2 top-1/2 w-96 -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-4">
          <Dialog.Title>Hello</Dialog.Title>
          <Dialog.Description>Accessible description.</Dialog.Description>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

References​