Headless Component Libraries

A component kit gives you behavior and appearance, and you fight the appearance whenever your design differs from the kit's. A headless library ships only the hard half: focus management, keyboard interaction, ARIA roles and states, portals, collision-aware positioning. It renders unstyled elements carrying data attributes such as data-state="open"; you supply every class name.

import { Dialog } from 'radix-ui';        // inside a DeleteButton({ onConfirm }) component
<Dialog.Root>
  <Dialog.Trigger className="btn-danger">Delete</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="overlay" />
    <Dialog.Content className="modal">
      <Dialog.Title>Delete this product?</Dialog.Title>
      <Dialog.Description>This cannot be undone.</Dialog.Description>
      <button onClick={onConfirm}>Delete</button>
      <Dialog.Close>Cancel</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Those lines get you a focus trap, aria-modal with the title and description wired to it, Escape to close, a scroll lock, click-outside dismissal and focus returned to the trigger — a week of work if you write it yourself. Every part also accepts asChild, merging its behavior into your own element.

Radix is the safe default and the one most other projects build on; React Aria Components goes furthest on internationalization, at the cost of a larger API; Headless UI is the smallest and assumes Tailwind. shadcn/ui 77,293 belongs here but not in the table: its CLI copies Radix-based, Tailwind-styled component source files into your repository, which you then own and edit — no upgrade path, total control.