Dialog

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

Made by imskyleen

Loading...

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.

Loading...

Props

Docs API Reference

Animate UI props

DialogContent

Prop

Type

Credits

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

Collapsible

An interactive component which expands/collapses a panel.

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

On this page

Animate UI props