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@latest add "https://components.dylanwlim.com/c/morphing-popover.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

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.