Beta
Animate UI

Dialog

A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.

Made by imskyleen
Edit on GitHub

Installation

Usage

<Dialog>
  <DialogBackdrop />
  <DialogPanel>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    <p>Dialog Content</p>
    <DialogFooter>
      <button>Close</button>
    </DialogFooter>
  </DialogPanel>
</Dialog>

Examples

From Left

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

Props

Animate UI props

DialogPanel

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

Credits

  • We use Headless 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