Animate UI

Popover

An accessible popup anchored to a button.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<Popover>
  <PopoverTrigger>Open popover</PopoverTrigger>
  <PopoverPortal>
    <PopoverPositioner>
      <PopoverPopup>
        <div>Popover content</div>
        <PopoverClose>Close popover</PopoverClose>
      </PopoverPopup>
    </PopoverPositioner>
  </PopoverPortal>
</Popover>

API Reference

Popover

Base UI API Reference - Popover.Root

PopoverTrigger

Base UI API Reference - Popover.Trigger

PopoverPortal

Base UI API Reference - Popover.Portal

The keepMounted property is not supported in the PopoverPortal component, as it is used for animation.

PopoverPositioner

Base UI API Reference - Popover.Positioner

PopoverPopup

Base UI API Reference - Popover.Popup
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 300, damping: 25 }
...props?
HTMLMotionProps<"div">
-

The render property is not supported in the PopoverPopup component, as it is used for animation.

PopoverBackdrop

Base UI API Reference - Popover.Backdrop

PopoverArrow

Base UI API Reference - Popover.Arrow

PopoverTitle

Base UI API Reference - Popover.Title

PopoverDescription

Base UI API Reference - Popover.Description

PopoverClose

Base UI API Reference - Popover.Close

Credits

Built by Skyleen. The source code is available on GitHub.