Radix UI

Unstyled, accessible UI primitives for React

modal

Low-level primitives with complete styling freedom and WAI-ARIA compliance.

ReactHeadlessAccessibleUnstyled

🎮 Playground

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

export default function Demo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
          <Dialog.Description>Description</Dialog.Description>
          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

Open Sandbox

Use cases

•Custom design systems
•Accessible web apps
•Component libraries

Good for

✓Teams with custom designs
✓Accessibility requirements
✓Performance-critical apps

Not good for

✗Quick prototyping
✗Projects needing styled components out of the box

Installation

$ npm install @radix-ui/react-dialog

Example

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

export default function Demo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Title</Dialog.Title>
          <Dialog.Description>Description</Dialog.Description>
          <Dialog.Close>Close</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}

Comparison

"More accessible than Headless UI, more flexible than Chakra UI."

Trust Metrics

16.5K

GitHub Stars

3.2M

Weekly Downloads

Last Commit:last year

Used by

LinearVercelCodesandbox

View on GitHub View on npm