Animate UI

Dialog

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

We take the Shadcn UI component and animate it with Motion.

Installation

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

Prop	Type	Default
`from?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 25 }`

We use Radix UI for the dialog component.
We take our inspiration from Shadcn UI for the dialog style (to make it easier to replace a shadcn component with the animate ui component).