Popover

PreviewCopy Anchor Link

Use a popover for contextual details or a small form. Use a tooltip for short, non-interactive hints.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/popover.json

Installs the component source and Base UI dependency while preserving your theme. Button, Input, and Field are separate items used in these examples. Keep @import "tw-animate-css"; in your global stylesheet for animations. See the registry guide for local endpoint details.

UsageCopy Anchor Link

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

Compose custom triggers and close actions with Base UI's render prop, as shown above. Provide a PopoverTitle to name the dialog and a PopoverDescription when supporting context is useful.

CompositionCopy Anchor Link

Keep the trigger and rich content inside the same Popover root:

Popover
├── PopoverTrigger
│   └── Button (via render)
└── PopoverContent
    ├── PopoverHeader
    │   ├── PopoverTitle
    │   └── PopoverDescription (optional)
    ├── Interactive content (optional)
    └── PopoverClose (optional)
        └── Button (via render)

Popover owns visibility. PopoverContent handles the portal, positioning, and popup internally. PopoverHeader groups the title and description visually; PopoverTitle provides the accessible popup name. Use Base UI's render prop to compose triggers and close actions with Button. PopoverClose dismisses the panel; it does not submit or save a form.

AlignmentCopy Anchor Link

Set align to start, center, or end. Use side for top, right, bottom, left, inline-start, or inline-end. Collision handling can change the final placement.

<PopoverContent side="bottom" align="start" sideOffset={8}>
  {/* Content */}
</PopoverContent>

With a formCopy Anchor Link

Control visibility with open and onOpenChange on Popover. Close after successful submission. This demo saves in memory only; connect your application's persistence when using it in a product.

Appearance and behaviorCopy Anchor Link

Content is portaled to avoid clipping. Tall panels scroll within available height. Reduced-motion preferences disable animation and transitions. Popup props such as initialFocus and finalFocus are forwarded to Base UI; positioning supports alignOffset and collisionPadding.

AccessibilityCopy Anchor Link

• Tab to the trigger; Enter or Space opens the popover.
• Focus moves into the panel on keyboard opening. Tab reaches interactive content.
• Escape dismisses the panel and restores trigger focus. Outside interaction also dismisses it.
• Use visible labels for fields and accessible names for icon buttons.
• Use a dialog for longer workflows that need more room.

Based on shadcn Base UI Popover and Base UI Popover.