Morphing Dialog
A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.
Examples
Morphing Dialog Basic
Morphing Dialog Basic 2
Morphing Dialog Image
Installation
npx motion-primitives@latest add morphing-dialog
Component API
MorphingDialog
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content of the dialog which could include triggers and content. | |
| transition | Transition | Transition settings from motion for animation effects. |
MorphingDialogTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content of the trigger, typically a string or formatted text. | |
| className | string | Optional CSS class for styling the trigger element. | |
| style | React.CSSProperties | Inline styles for the trigger element. | |
| triggerRef | React.RefObject | Ref to attach to the trigger element, useful for managing focus. |
MorphingDialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content displayed within the dialog when it is open. | |
| className | string | Optional CSS class for styling the content container. | |
| style | React.CSSProperties | Inline styles for the content container. |
MorphingDialogTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The title content of the dialog. | |
| className | string | Optional CSS class for the title element. | |
| style | React.CSSProperties | Inline styles for the title element. |
MorphingDialogSubtitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The subtitle content of the dialog. | |
| className | string | Optional CSS class for the subtitle element. | |
| style | React.CSSProperties | Inline styles for the subtitle element. |
MorphingDialogDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The descriptive content of the dialog. | |
| className | string | Optional CSS class for the description container. | |
| disableLayoutAnimation | boolean | false | If true, disables layout animations for the description. |
| variants | Object | Variants for the animation states of the description. |
MorphingDialogImage
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | Image source URL. | |
| alt | string | Alternative text for the image. | |
| className | string | Optional CSS class for the image element. | |
| style | React.CSSProperties | Inline styles for the image element. |
MorphingDialogClose
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Optional custom content for the close button, defaults to X icon. | |
| className | string | Optional CSS class for the close button. | |
| variants | Object | Variants for the animation states of the close button. |