Beta
Animate UI

Dialog

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

Made by imskyleen
Edit on GitHub

Installation

Usage

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

Examples

From Left

Use the from prop to change the direction of the dialog flip animation.

Props

DocsAPI Reference

Animate UI props

DialogContent

PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 25 }
from?
'top' | 'bottom' | 'left' | 'right'
top

Credits

  • We use Radix UI for the dialog component.
  • We take our inspiration from Shadcn UI for the dialog style.

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

On this page