ComponentsProNew
Linear Modal
A card grows into a large window on click: its image, title and subtitle glide into place. Close it with the cross, a click on the backdrop or Esc.
Customize
accentColor
glowColor
highlightColor
Based on Linear Modal (MIT license) ยท Terms of use
Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | โ | A DialogTrigger card and a DialogContainer with DialogContent. |
| bounce | number | 0.15 | Spring bounce of the card-to-window morph. Zero means no overshoot. |
| duration | number | 0.45 | Morph duration in seconds. |
| transition | Transition | โ | Your own full motion transition. Replaces bounce and duration. |
| DialogContainer.overlayClassName | string | โ | Classes of the backdrop behind the window. |
| DialogDescription.disableLayoutAnimation | boolean | โ | The text just fades in instead of morphing from the card. |
| DialogImage.src | string | โ | Image that morphs from the card into the window. |
| accentColor | string | "#ffffff" | Main colour: soft glow under the open dialog. |
| glowColor | string | "rgba(115,115,115,0.55)" | Tint rising from the edges of the dark backdrop behind the dialog. |
| highlightColor | string | "rgba(255,255,255,0.12)" | Thin light edge along the top of the dialog. |
| className | string | โ | Extra classes. |
Dependencies
4 required packages
npm install motion lucide-react clsx tailwind-merge