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

---

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 releaseDate: 2025-09-07

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

Installation

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

Usage

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

API Reference

Popover

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

PopoverButton

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

PopoverBackdrop

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

PopoverGroup

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

PopoverPanel

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

<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

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