Morphing Dialog
A card that physically morphs into a modal through a shared layout, then springs back on close.
Aurora Sessions
Tap to expand
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/morphing-dialog.json"The trigger and content share a layoutId, so opening the dialog morphs the card
into the modal with an underdamped spring and a blurred backdrop fade — and
reverses on close. Escape and backdrop clicks dismiss it, body scroll locks while
open, and the spring is skipped under prefers-reduced-motion.
Usage
tsx
import {
MorphingDialog,
MorphingDialogTrigger,
MorphingDialogContent,
MorphingDialogClose,
} from "@/components/godui/morphing-dialog";Wrap a trigger and content in a single MorphingDialog. It's uncontrolled by
default; pass open / onOpenChange to control it.
tsx
<MorphingDialog>
<MorphingDialogTrigger>{/* collapsed card */}</MorphingDialogTrigger>
<MorphingDialogContent>
{/* expanded view */}
<MorphingDialogClose />
</MorphingDialogContent>
</MorphingDialog>Props
MorphingDialog
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Called whenever the open state changes. |
MorphingDialogTrigger, MorphingDialogContent, and MorphingDialogClose
forward every standard attribute to their root element. The trigger and content
must share one MorphingDialog parent so they animate as a pair.