Morph Popover

ProNew

A trigger button that morphs into a floating non-modal panel with a shared layout animation, for quick forms such as feedback.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/morph-popover

Prop	Type	Default	Description
`label`	`ReactNode`	-	Trigger content, reused as the panel heading and dialog name.
`icon`	`ReactNode`	-	Icon before the label in both states.
`children`	`ReactNode \| ((close: () => void) => ReactNode)`	-	Panel body. The function form receives `close`.
`open`	`boolean`	-	Open state when controlled.
`defaultOpen`	`boolean`	`false`	Open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Called when the panel opens or closes.
`align`	`"start" \| "end"`	`"start"`	Which trigger edge the panel grows from.
`triggerClassName`	`string`	-	Class names for the trigger.
`panelClassName`	`string`	-	Class names for the panel, for example its width.

Also accepts div props for the wrapper.

The trigger has aria-haspopup="dialog". The panel is a non-modal dialog named by the label.
On open, focus moves to an autoFocus element, else the first field, else the panel. Escape, the close button or a press outside closes it, and focus returns to the trigger.
The trigger's footprint is kept while open, so content around it does not shift.
With reduced motion the panel appears and disappears without the morph.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/morph-popover

Prop	Type	Default	Description
`label`	`ReactNode`	-	Trigger content, reused as the panel heading and dialog name.
`icon`	`ReactNode`	-	Icon before the label in both states.
`children`	`ReactNode \| ((close: () => void) => ReactNode)`	-	Panel body. The function form receives `close`.
`open`	`boolean`	-	Open state when controlled.
`defaultOpen`	`boolean`	`false`	Open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Called when the panel opens or closes.
`align`	`"start" \| "end"`	`"start"`	Which trigger edge the panel grows from.
`triggerClassName`	`string`	-	Class names for the trigger.
`panelClassName`	`string`	-	Class names for the panel, for example its width.

Also accepts div props for the wrapper.

The trigger has aria-haspopup="dialog". The panel is a non-modal dialog named by the label.
On open, focus moves to an autoFocus element, else the first field, else the panel. Escape, the close button or a press outside closes it, and focus returns to the trigger.
The trigger's footprint is kept while open, so content around it does not shift.
With reduced motion the panel appears and disappears without the morph.