# Morphing dialog

> A card that morphs into a dialog: cover, title and frame fly to their new places.

Component · Pro · https://lodeui.com/components/morphing-dialog

## When to use

- Galleries, collections and feature cards where the detail view should feel connected to the card.

## When not to use

- Forms and confirmations: use a dialog.
- Lists of dozens of cards on low-end devices.

## Installation

```bash
npx shadcn@latest add @lode/morphing-dialog
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { MorphingDialog } from "@/components/ui/morphing-dialog";

export function Collection() {
  return (
    <MorphingDialog title="Aurora" subtitle="24 pieces" image="/covers/aurora.jpg">
      <p>Soft gradients and glass surfaces…</p>
    </MorphingDialog>
  );
}
```

## API reference

### MorphingDialog

A card button that expands into a modal dialog with shared-element transitions.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / subtitle | `string` | – | Shown on the card and in the dialog. |
| image | `string` | – | Cover image URL. |
| colors | `[string, string]` | – | Gradient cover when there's no image. |
| children | `ReactNode` | – | Content shown only when open. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open |
| Esc | Close |
| Tab / Shift+Tab | Cycle focus inside the dialog |

## Accessibility

- A real modal: aria-modal, labelled by the title, focus trapped and returned to the card.
- Page scroll is locked while open.

## Motion

- Frame, cover, title and subtitle share layout IDs and fly between card and dialog (spring, 500ms).
- Body text fades up after the morph.
- Instant under reduced motion.

## Responsive behavior

- Cards up to 272px; the dialog is up to 512px and scrolls inside on short screens.

## Performance

- Dialog content mounts only when open.

## Notes for AI

- Each instance gets its own layout IDs, so many can share a page.

## Related

- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Drawer](https://lodeui.com/components/drawer) — A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.
- [Flip card](https://lodeui.com/components/flip-card) — A two-sided card that flips in 3D on click, Enter or hover.