Dialog

A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.

Open in

from

Installation

Usage

<Dialog>
  <DialogBackdrop />
  <DialogPanel>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <button>Accept</button>
    </DialogFooter>
    <DialogClose>Close</DialogClose>
  </DialogPanel>
</Dialog>

API Reference

Dialog

Headless UI API Reference - Dialog

DialogBackdrop

Headless UI API Reference - DialogBackdrop

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.2, ease: 'easeInOut' }`
`...props?`	`HTMLMotionProps<"div">`	-

DialogClose

Headless UI API Reference - DialogClose

DialogPanel

Headless UI API Reference - DialogPanel

Prop	Type	Default
`from?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

DialogHeader

Prop	Type	Default
`...props?`	`React.ComponentProps<'div'>`	-

DialogTitle

Headless UI API Reference - DialogTitle

DialogDescription

Headless UI API Reference - DialogDescription

DialogFooter

Prop	Type	Default
`...props?`	`React.ComponentProps<'div'>`	-

Credits

Headless Dialog

Dialog

On this page