Radix UI

Unstyled, accessible primitives (Dialog, Dropdown, etc.).

Live demoradix

Radix Primitives give you the correct, accessible behavior for every ambiguous UI pattern — focus management, keyboard nav, ARIA, portals. shadcn/ui is essentially Radix + Tailwind.

Install

npm i @radix-ui/react-dialog @radix-ui/react-dropdown-menu

Snippet

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

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/60" />
    <Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>...</Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>