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

---

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

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

Installation

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

Usage

<Popover>
  <PopoverTrigger>Open popover</PopoverTrigger>
  <PopoverPanel>
    <div>Popover panel</div>
  </PopoverPanel>
</Popover>

API Reference

Popover

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/popover#popover" text="Animate UI API Reference - Popover Primitive" />

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

</div>

PopoverTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/popover#popovertrigger" text="Animate UI API Reference - Popover Trigger Primitive" />

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

</div>

PopoverPanel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/popover#popoverpositioner" text="Animate UI API Reference - Popover Positioner Primitive" />

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

</div>

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

<Callout type="info"> The `forceMount` and `asChild` properties are not supported in the `PopoverPanel` component, as it is used for animation. </Callout>

PopoverClose

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/popover#popoverclose" text="Animate UI API Reference - Popover Close Primitive" />

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

</div>

Credits

• Base UI Popover
• Credit to shadcn/ui for style inspiration.

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