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

---

title: Popover description: Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus. author: name: imskyleen url: https://github.com/imskyleen

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

Installation

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

Usage

<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>
    <div>Popover Content</div>
  </PopoverContent>
</Popover>

API Reference

Popover

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

<ExternalLink href="https://headlessui.com/react/popover#popover" text="Headless UI API Reference - Popover" />

</div>

PopoverButton

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

<ExternalLink href="https://headlessui.com/react/popover#popover-button" text="Headless UI API Reference - PopoverButton" />

</div>

PopoverBackdrop

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

<ExternalLink href="https://headlessui.com/react/popover#popover-backdrop" text="Headless UI API Reference - PopoverBackdrop" />

</div>

PopoverGroup

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

<ExternalLink href="https://headlessui.com/react/popover#popover-group" text="Headless UI API Reference - PopoverGroup" />

</div>

PopoverPanel

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

<ExternalLink href="https://headlessui.com/react/popover#popover-panel" text="Headless UI API Reference - PopoverPanel" />

</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, }, }} />

Credits

• Headless Popover
• Credit to shadcn/ui for style inspiration.

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