Dialog

Overlay that appears on top of the main content to display important information or prompt user interaction. It prevents interaction with the rest of the application while active, ensuring user focus on a specific task. Suitable for general-purpose overlays and non-destructive interactions such as forms, previews, or feature walkthroughs.

  • Supports modal and non-modal modes

  • Focus is automatically trapped within modal

  • Can be controlled or uncontrolled

  • Manages screen reader announcements

  • Keyboard support

  • Animated with Motion

  • Respects reduce motion via system settings and props

Pure UI

Installation

Loading...

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:

  • default
  • anticipate
  • quickOut
  • overshootOut
  • swiftOut
  • snappyOut
  • inOut
  • inQuad
  • inCubic
  • inQuart
  • inQuint
  • inExpo
  • inCirc
  • outQuad
  • outCubic
  • outQuart
  • outQuint
  • outExpo
  • outCirc
  • inOutQuad
  • inOutCubic
  • inOutQuart
  • inOutQuint
  • inOutExpo
  • inOutCirc
  • inOutBase
  • in
  • out
  • linear

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

PropTypeDefault
showCloseButton
boolean
―
animation
AnimationProps
―
animationPreset
enum
"motion"
transition
Transition
―
transitionPreset
enumTransitionPreset
―
reduceMotion
boolean
false

DialogTitle

Support all Title Radix API

DialogDescription

Support all Description Radix API

DialogClose

Support all Close Radix API

⮠ PrevCollapsible
Next ⮡Form