Dialog

Installation

Usage

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <DialogTitle />
      <DialogDescription />
    </DialogHeader>
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Non-modal

Reduce Motion

Animation Presets

Slide Top

Slide Bottom

Scale Top

Scale Bottom

Scale Down

Perspective Top

Perspective Bottom

Perspective Left

Perspective Right

Wipe

Fade

Custom Animation

Transition Presets

Each animation comes with predefined transitionPreset

Alternatively, you can choose transition from this list:

Additionaly, you can control the duration of the transition:

<DialogContent
  animationPreset="scale-down"
  transitionPreset={{
    ease: "inOutExpo",
    duration: 1,
  }}
/>

Custom Transition

API Reference

Dialog

Support all Root Radix API.

DialogTrigger

Support all Trigger Radix API.

DialogHeader

DialogFooter

DialogContent

DialogTitle

Support all Title Radix API.

DialogDescription

Support all Description Radix API.

DialogClose

Support all Close Radix API.