Popover

Displays rich content in a portal, triggered by a button.

overlayinteractive

Loading preview...

Installation

npx baseui-cn add popover

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Settings</PopoverTitle>
      <PopoverDescription>Adjust your preferences.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Examples

Basic

A simple popover.

Loading preview...

With form

A popover containing a form.

Loading preview...

Placement

Popover positioned on different sides.

Loading preview...

API

PopoverContent

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the trigger the popover opens on
`sideOffset`	`number`	`4`	Distance in px between the popover and the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger
`alignOffset`	`number`	`0`	Offset in px along the alignment axis

API Reference

See the Base UI Popover documentation for the full API reference, including all props, data attributes, and CSS classes.