║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Popover description: An accessible popup anchored to a button. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-base-popover" />

Installation

<ComponentInstallation name="primitives-base-popover" />

Usage

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

API Reference

Popover

<ExternalLink href="https://base-ui.com/react/components/popover#root" text="Base UI API Reference - Popover.Root" />

PopoverTrigger

<ExternalLink href="https://base-ui.com/react/components/popover#trigger" text="Base UI API Reference - Popover.Trigger" />

PopoverPortal

<ExternalLink href="https://base-ui.com/react/components/popover#portal" text="Base UI API Reference - Popover.Portal" />

<Callout type="info"> The `keepMounted` property is not supported in the `PopoverPortal` component, as it is used for animation. </Callout>

PopoverPositioner

<ExternalLink href="https://base-ui.com/react/components/popover#positioner" text="Base UI API Reference - Popover.Positioner" />

PopoverPopup

<ExternalLink href="https://base-ui.com/react/components/popover#popup" text="Base UI API Reference - Popover.Popup" />

<TypeTable type={{ transition: { description: 'The transition of the popover popup.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 300, damping: 25 }", }, '...props': { description: 'The props of the popover content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `render` property is not supported in the `PopoverPopup` component, as it is used for animation. </Callout>

PopoverBackdrop

<ExternalLink href="https://base-ui.com/react/components/popover#backdrop" text="Base UI API Reference - Popover.Backdrop" />

PopoverArrow

<ExternalLink href="https://base-ui.com/react/components/popover#arrow" text="Base UI API Reference - Popover.Arrow" />

PopoverTitle

<ExternalLink href="https://base-ui.com/react/components/popover#title" text="Base UI API Reference - Popover.Title" />

PopoverDescription

<ExternalLink href="https://base-ui.com/react/components/popover#description" text="Base UI API Reference - Popover.Description" />

PopoverClose

<ExternalLink href="https://base-ui.com/react/components/popover#close" text="Base UI API Reference - Popover.Close" />

Credits

• Base UI Popover

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║