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
Open in

Installation

Usage

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

API Reference

Dialog

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

DialogTrigger

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

DialogContent

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

The asChild and forceMount properties are not supported in the DialogContent component, as it is used for animation.

DialogClose

Animate UI API Reference - Dialog Close PrimitiveRadix 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 PrimitiveRadix UI API Reference - Dialog.Title

DialogDescription

Animate UI API Reference - Dialog Description PrimitiveRadix 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.