Popover

Installation

pnpm dlx shadcn@latest add @paneui/popover

Usage

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

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>Details</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>All caught up</PopoverTitle>
    <PopoverDescription>No new approvals.</PopoverDescription>
  </PopoverContent>
</Popover>

Composition

Popover
├── PopoverTrigger
└── PopoverContent
    ├── PopoverCloseButton
    ├── PopoverHeader
    │   ├── PopoverTitle
    │   └── PopoverDescription
    └── PopoverFooter
        └── PopoverClose

Examples

Sides

Align

Controlled

Use when the popover should close after a form submits.

Open on Hover

Use for previews that should appear on hover, like a hover card.

RTL

Motion

The popup slides 4px toward its side and leaves faster than it arrives. With reduced motion it only fades.

Keyboard

Enter or Space on the trigger opens it and moves focus inside; Esc closes it and returns focus.

Popover Morph grows the popover out of its trigger.

API Reference

Built on the Popover primitive. Only the props this library adds or changes are listed; everything else passes through.

Also accepts every prop of Popover.Root.

PopoverTrigger

Also accepts every prop of Popover.Trigger.

PopoverContent

The 288px-wide popup, already wrapped in a portal and positioner. Also accepts every prop of Popover.Popup.

side= "bottom": "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end"; Edge of the trigger it opens on.
sideOffset= 8: number; Gap to the trigger in px.
align= "center": "start" | "center" | "end"; Alignment against the trigger.
alignOffset= 0: number; Shift along the alignment axis in px.
collisionPadding= 8: number | Rect; Space kept from the viewport edges.

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"	"bottom"	Edge of the trigger it opens on.
sideOffset	number	8	Gap to the trigger in px.
align	"start" \| "center" \| "end"	"center"	Alignment against the trigger.
alignOffset	number	0	Shift along the alignment axis in px.
collisionPadding	number \| Rect	8	Space kept from the viewport edges.

data-side: The side it actually opened on.
data-starting-style / data-ending-style: Set during the enter and exit transitions.

Data attribute	Description
data-side	The side it actually opened on.
data-starting-style / data-ending-style	Set during the enter and exit transitions.

PopoverHeader

Stacks title and description with a 4px gap. Also accepts every prop of div.

PopoverTitle

Also accepts every prop of Popover.Title.

PopoverDescription

Also accepts every prop of Popover.Description.

PopoverFooter

Right-aligned row for actions. Also accepts every prop of div.

PopoverClose

Unstyled close part. Pass render={<Button />} to make any button close the popover. Also accepts every prop of Popover.Close.

PopoverCloseButton

Round × button pinned to the top-right corner, labelled "Close". Also accepts every prop of Popover.Close.