KQ-009 · MORPH/DIALOG
Morph Dialog
The trigger becomes the dialog — a shared-element morph glides the card you clicked into the panel it opens, and reverses on close.
KQ-009 · MORPH/DIALOG
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/morph-dialog
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Controlled or uncontrolled open state. |
| size | "sm" | "md" | "lg" | "md" | Panel width preset; ignored by the sheet variant. |
| sheet | boolean | false | Bottom-sheet variant — full-width, pinned to the bottom edge. |
| dismissible | boolean | true | Escape, backdrop click, and the built-in close button. |
| portal | boolean | true | Portal to body, or contain the overlay in a relative parent. |
| Content.title / Content.description | string | — | Wired to aria-labelledby and aria-describedby; title renders as h2. |