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

EB27

Edouard Wilfrid Buquet

What I Talk About When I Talk About Running

Haruki Murakami

npx shadcn add "https://motion-primitives.com/c/morphing-dialog.json" "https://motion-primitives.com/h/useClickOutside.json"

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.

Prop	Type	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.

Prop	Type	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.

Prop	Type	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.

Prop	Type	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.

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.

Prop	Type	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.

Prop	Type	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.