Popover

Popovers are for small, local overlays that should remain tied to one trigger. They are useful when the user needs a little more context or a compact control group, but not a full dialog, drawer, or page transition.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>Compact supporting content.</PopoverContent>
</Popover>

Why This Primitive Exists

The popover provides a controlled way to add a small inspection or settings layer without interrupting the main workflow.

• Use it for lightweight settings, metadata, or inspection notes.
• Keep the interaction short. If the user needs multiple steps or a strong confirmation boundary, use a dialog or drawer instead.
• Anchor it to the element that owns the context so the relationship is obvious.

Examples

Basic Popover

The baseline pattern is a trigger plus one small card of supporting content.

Compact Settings Cluster

This is a good fit for one small decision group that belongs near the current control.

<PopoverContent align="start" className="grid gap-4">
  <div className="flex items-center justify-between gap-4 border border-border p-3">
    <Label htmlFor="show-grid">Show baseline grid</Label>
    <Switch id="show-grid" defaultChecked />
  </div>
</PopoverContent>

In Context

Popovers are strongest when they clarify a row, note, or inspection surface without breaking the current reading flow.

Guidance

Keep The Surface Small

• Limit the content to one short note or one compact control cluster.
• Avoid turning the popover into a hidden form page.
• Keep the copy precise so the user can finish and move on quickly.

Choose It Over Heavier Overlays Carefully

• Use Popover when the user should stay anchored to the trigger.
• Use Hover Card for passive preview content.
• Use Dialog when the task needs stronger focus, validation, or confirmation.

Align It To The Trigger

• Use align and sideOffset when the default placement needs small layout corrections.
• Keep the trigger label explicit so users understand what the overlay contains.
• Avoid putting critical destructive actions in a popover unless the scope is very limited.

API Reference

Root Exports

PopoverContent

PopoverContent wraps @radix-ui/react-popover content and applies the shared card treatment.

It also accepts the full Radix popover content API, including collision handling, side placement, and event callbacks.