Popover

This popover morphs in place. It opens exactly where you click, using layoutId for a smooth transformation from button to panel.

Source Code

Copy and paste the following code into your project.

Installation

This will also install: use-click-outside

Terminal

npx shadcn@latest add https://ui.edbn.me/r/popover.json

Basic Usage

Click the button. The popover grows from it, rather than appearing above or below.

Add Note (Textarea)

Here's a real-world example: a note-taking form. It manages state, handles submission, and cleans up when you close it.

Dimensions Editor

Need a form? This dimensions editor has multiple inputs working together.

Custom Variants

Want different animation? Pass in custom variants.

Custom Transition

Adjust the spring physics to change how it opens.

Controlled State

Control when it opens and closes from your own code.

State: Closed

API Reference

Popover.Root

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

Popover.Trigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	The trigger element content
`asChild`	`boolean`	`false`	Merge props onto child element
`className`	`string`	—	Additional CSS classes

Popover.Content

Prop	Type	Default	Description
`children`	`React.ReactNode`	Required	The content to display
`className`	`string`	—	Additional CSS classes

Accessibility

Dialog pattern with proper ARIA attributes and keyboard support.

Keyboard

TabNavigate through content

â‡§+Tab

Navigate backwards

EscClose popover

Screen Readers

Dialog role role="dialog": Content is announced as a dialog with modal behavior.
Trigger state aria-expanded: Communicates open/closed state to assistive technology.

Note

Unlike dropdowns that float above or below, this popover morphs in place. It uses layoutId to transform from the button to the panel smoothly.