Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

from

Installation

Usage

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogDescription>Dialog Description</DialogDescription>
      </DialogHeader>
      <p>Dialog Content</p>
      <DialogFooter>
        <button>Accept</button>
      </DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogContent>
  </DialogPortal>
</Dialog>

API Reference

The forceMount property is not supported in the DialogPortal component, as it is used for animation.

DialogOverlay

Radix UI API Reference - Dialog.Overlay

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

The asChild and forceMount properties are not supported in the DialogOverlay component, as it is used for animation.

DialogContent

Radix UI API Reference - Dialog.Content

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