127 Components
Morphing Dialog
OverlaysOrigin-morphing modal overlay that expands seamlessly from its trigger button bounding box with spring layout projection and vertical drag-to-dismiss.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/morphing-dialog.json"
Props
TypeScript props supported by <MorphingDialog />.
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerTitle | string | "Inspect Spring Telemetry" | Primary heading displayed inside the origin trigger button. |
| triggerSubtitle | string | "Click to expand shared-layout surface" | Supporting subtitle displayed inside the origin trigger button. |
| dialogTitle | string | "Hooke's Law Telemetry Architecture" | Heading text displayed inside the expanded modal dialog. |
| stiffness | number | 290 | Hooke's Law spring stiffness for shared layout projection. |
| damping | number | 26 | Spring damping coefficient for shared layout projection. |
| dialogDescription | string | — | Expanded description text within the dialog modal |
| open | boolean | — | Controlled open/closed state of the dialog |
| onOpenChange | (open: boolean) => void | — | Callback fired when dialog open state toggles |
Key Features
- Seamless bounding-box morphing between compact trigger and modal dialog via Framer Motion layoutId.
- Elastic vertical drag-to-dismiss gesture with velocity and displacement thresholds.
- Automatic keyboard focus transfer into the dialog and restoration to the origin trigger on close.
Keyboard & Accessibility
- Implements role='dialog', aria-modal='true', aria-labelledby, and aria-describedby.
- Supports Escape key dismissal and restores focus to the trigger button upon closing.
- Disables layout morphing and drag gestures when prefers-reduced-motion is enabled.