Morphing Popover

A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.

Examples

You can pass a custom transition and variants to the popover with the variants and transition props.

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

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	The content of the popover (trigger and content)
`transition`	`Transition`	`{ type: 'spring', bounce: 0.1, duration: 0.4 }`	Custom transition settings for the animations
`defaultOpen`	`boolean`	`false`	Whether the popover is open by default
`open`	`boolean`	`undefined`	Controlled open state
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback fired when open state changes
`variants`	`Variants`	`undefined`	Custom variants for the animation
`className`	`string`	`undefined`	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	The trigger element content
`asChild`	`boolean`	`false`	Whether to merge props onto the child element
`className`	`string`	`undefined`	Additional CSS classes

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	The content to display in the popover
`className`	`string`	`undefined`	Additional CSS classes