# Morph Dialog

> Morph dialog for React and Tailwind CSS (shadcn/ui) that opens by growing out of the exact button or card that triggered it and closes by shrinking back into the same spot. It is built to keep people oriented, so a modal never feels like it appeared from nowhere. A morph dialog is a modal whose enter and exit animations are anchored to the trigger element: this one measures the trigger with getBoundingClientRect, animates translate, scale and border-radius with the Web Animations API, reveals the blurred backdrop as a circle expanding from the trigger, and fades the content in once the panel has mostly formed. Wrap any button or card as the trigger and pass a title, description, body and footer. Supports controlled and uncontrolled open state, Escape and outside-click dismissal, focus trapping with focus restored to the trigger, body scroll locking, aria-modal labelling, custom width, duration and easing, blur or dim backdrops, and reduced motion fallbacks. Use it for invite flows, detail views, confirmations and settings panels in SaaS dashboards. The included demo opens from a button and from a card; the component makes no requests. Requires React, react-dom and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Dialog, Modal, Animation, Overlay, shadcn/ui
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/morph-dialog

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/morph-dialog?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/dialog.md