Dialog

A popup that opens on top of the entire page.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogPopup>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <p>Dialog Content</p>
    <DialogFooter>
      <button>Accept</button>
    </DialogFooter>
  </DialogPopup>
</Dialog>

API Reference

Dialog

Animate UI API Reference - Dialog PrimitiveBase UI API Reference - Dialog.Root

DialogTrigger

Animate UI API Reference - Dialog Trigger PrimitiveBase UI API Reference - Dialog.Trigger

DialogPopup

Animate UI API Reference - Dialog Content PrimitiveBase UI API Reference - Dialog.Popup
PropTypeDefault
showCloseButton?
boolean
true
from?
'top' | 'bottom' | 'left' | 'right'
top
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 25 }
...props?
HTMLMotionProps<"div">
-

The render property is not supported in the DialogPopup component, as it is used for animation.

DialogClose

Animate UI API Reference - Dialog Close PrimitiveBase UI API Reference - Dialog.Close

DialogHeader

Animate UI API Reference - Dialog Header Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

DialogTitle

Animate UI API Reference - Dialog Title PrimitiveBase UI API Reference - Dialog.Title

DialogDescription

Animate UI API Reference - Dialog Description PrimitiveBase UI API Reference - Dialog.Description

DialogFooter

Animate UI API Reference - Dialog Footer Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/21/2025