Popover

Anchored floating panel for contextual controls and forms. Built on Base UI Popover with automatic collision detection. Accepts side and align props.

Preview

Installation

bash

npx shadcn@latest add @layout/popover

Usage

tsx

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

Examples

Info icon

Token contract

Positioning

Guidelines for AI agents

Use for anchored, interactive panels such as filter controls, date pickers, colour swatches, and form fields that appear relative to a trigger element. Dismissed by clicking outside. Use side and align props to control placement. For read-only hover previews use HoverCard; for single-line labels use Tooltip.

Never

Neveruse Popover for read-only hover previews — use HoverCard
Neveruse Popover for single-line labels on icon buttons — use Tooltip
Neverput destructive confirmation in a Popover — use AlertDialog
Neverhardcode width; use the default w-72 or override via className only

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-md--layout-radius--layout-duration-base