# Motion Morphing Dialog

Card that morphs into a modal dialog and back.

- id: `motion-morphing-dialog`
- Page: https://agentic-ui-kit.com/components/motion-morphing-dialog
- Live preview: https://agentic-ui-kit.com/live/component/motion-morphing-dialog?piece=motion-morphing-dialog

## Install

```bash
agentic-ui add motion-morphing-dialog
npx shadcn@4.17.0 add @agentic-ui/motion-morphing-dialog
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** card-to-dialog-morph, shared-layoutid, modal-dialog-semantics, focus-trap, focus-to-close-and-back, escape-and-backdrop-close, scroll-lock, portal, controlled-and-uncontrolled, reduced-motion-fallback
- **Intents:** explore-detail
- **Suits domains:** saas, ecommerce, media, project-management, knowledge
- **Interaction:** click, keyboard-navigation
- **Screen role:** detail
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** card that morphs into a modal dialog and back, shared layout dialog opening from a card, accessible animated modal that grows out of its trigger, dialog with a morph transition from a preview card
- **Avoid when:** The detail should grow inside the grid without an overlay (use motion-expandable-card), A simple fade-and-scale modal is enough (use motion-modal-enter), The detail is a separate page (use motion-hero-to-detail), A destructive confirmation (use an alert dialog)
- **Preserve when adapting:** dialog-semantics, focus-trap, focus-return, scroll-lock, backdrop-and-escape-close, instant-fallback
- **Replace when adapting:** title, summary, media, children, open, close-label
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, motion, react
- **Motion:** profile subtle, library motion, reduced-motion fallback yes, target 60 fps
- **npm dependencies (registry):** motion@12.23.24
- **Registry dependencies:** lib-motion