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

showCloseButton

Installation

Usage

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

API Reference

Dialog

Animate UI API Reference - Dialog Primitive Headless UI API Reference - Dialog

DialogBackdrop

Animate UI API Reference - Dialog Backdrop Primitive Headless UI API Reference - DialogBackdrop

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

DialogClose

Animate UI API Reference - Dialog Close Primitive Headless UI API Reference - DialogClose

DialogPanel

Animate UI API Reference - Dialog Panel Primitive 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

Animate UI API Reference - Dialog Header Primitive

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

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

Credits

Headless Dialog
Credit to shadcn/ui for style inspiration.

Dialog

On this page