Animated Modal

Native dialog whose panel springs in with a tilt over a blurred backdrop.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-modal.json

Adds components/velora/animated-modal.tsx, installs motion.

A travel booking modal with a photo strip, trip details and a CTA footer.

Prop	Type	Default
`open` Controlled open state	`boolean`	`—`
`defaultOpen` Initial open state when uncontrolled	`boolean`	`false`
`onOpenChange` Called whenever the modal asks to open or close	`(open: boolean) => void`	`—`
`children*` ModalTrigger, ModalContent and anything else	`React.ReactNode`	`—`

Also accepts every <button> attribute, forwarded to the root element.

Prop	Type	Default
`title` Heading rendered at the top; it becomes the dialog's accessible name	`React.ReactNode`	`—`
`description` Supporting text under the title, announced as the dialog's description	`React.ReactNode`	`—`
`showCloseButton` Show the × button in the top-right corner	`boolean`	`true`

Also accepts every <div> attribute, forwarded to the root element.

Also accepts every <div> attribute, forwarded to the root element.

Also accepts every <button> attribute, forwarded to the root element.

Reduced motion: The spring, scale and tilt are dropped; the panel and backdrop fade in and out over 150–200ms.
Keyboard: The trigger is a native button. Opening moves focus into the dialog and Tab stays inside it (native showModal); Escape, the × button and ModalClose close it, and focus returns to the element that opened it.
Screen readers: A native modal <dialog> named by its title (or aria-labelledby) and described by its description; the page behind is inert while it is open.