Popover

An accessible popup anchored to a trigger button.

API Reference

Preview

Installation

Usage

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Popover Title</PopoverTitle>
      <PopoverDescription>Popover description text.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

API Reference

Popover

Root component. Alias for Popover.Root from Base UI.

PopoverTrigger

Trigger button that opens the popover. Alias for Popover.Trigger from Base UI.

PopoverContent

Popup container that displays the popover content. Wraps Popover.Portal, Popover.Positioner, and Popover.Popup.

PopoverHeader

Container for the title and description. Plain div with bottom margin.

PopoverTitle

Title text for the popover. Styled wrapper for Popover.Title from Base UI.

PopoverDescription

Description text for the popover. Styled wrapper for Popover.Description from Base UI.

Examples

With Close Button

Tooltip Style