edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopover
Dropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
Components
BlocksMaps
HomeDocsComponentsAnimatedPopover

On this page

Popover

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

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverBody,
} from "@/components/ui/animated/popover"
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
    </PopoverHeader>
    <PopoverBody>Content</PopoverBody>
  </PopoverContent>
</Popover>

Installation

Examples

Basic Popover

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

PropTypeDefaultDescription
childrenReact.ReactNodeRequiredThe content of the popover
transitionTransition
{
type: 'spring',
bounce: 0.05,
duration: 0.3
}
Custom transition settings
defaultOpenbooleanfalseWhether the popover is open by default
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Callback when state changes
variantsVariants—Custom animation variants
classNamestring—Additional CSS classes

PopoverTrigger

PropTypeDefaultDescription
childrenReact.ReactNodeRequiredThe trigger element content
asChildbooleanfalseMerge props onto child element
classNamestring—Additional CSS classes

PopoverContent

PropTypeDefaultDescription
childrenReact.ReactNodeRequiredThe content to display
classNamestring—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.