Shadcn Popover

The shadcn popover is a panel that opens from a click and stays until you click outside or press Escape. Use it for a short form, a filter, or extra controls next to a button. A phrase is a Tooltip. Blocking the page is a Dialog.

Usage

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

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

render={<Button />} keeps the Button as the trigger. align defaults to center. sideOffset is 4.

Composition

PopoverAnchor is optional — position against something other than the trigger.

Basic

Header, title, description. align="start" pins the panel to the leading edge.

Align

align on PopoverContent is start, center, or end.

With Form

Fields stay next to the trigger. The rest of the page is still live.

RTL

Wrap with DirectionProvider and dir="rtl". Physical side values stay left and right.

API

PopoverContent

PopoverTrigger and PopoverAnchor take render. PopoverHeader, PopoverTitle, and PopoverDescription take className.

Keyboard

Focus is not trapped. Tab can leave the panel.

Notes

Keep the panel short. A long workflow is a Dialog.

With other components

Questions

Related