Popover

Presents supplementary information or interactive content in a floating container (portal) anchored to a trigger element, typically activated by a click. Useful for dropdowns, tooltips with complex content, or contextual forms.

Docs API Reference

Component Installation Guide

npx shadcn@latest add popover

Implementing the Popover Component

  Popover, // The main container component managing the popover's open/close state and positioning.
  PopoverContent, // The floating panel that appears, containing the popover's content.
  PopoverTrigger, // Wraps the element (e.g., a button) that opens the popover on interaction (usually click).
  PopoverAnchor, // Optional component to define a different positioning anchor than the trigger.
  PopoverClose, // Optional component to create a button that closes the popover.
} from "@/components/ui/popover"; // Adjust import path as necessary.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>

  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium leading-none">Dimensions</h4>
        <p className="text-muted-foreground text-sm">
          Set the dimensions for the layer.
        </p>
      </div>
    </div>
  </PopoverContent>
</Popover>

The fundamental pattern involves wrapping the trigger element (like a <Button>) with <PopoverTrigger> and placing the content to be displayed inside <PopoverContent>. Both are nested within the root <Popover> component. Radix UI handles the positioning relative to the trigger, manages the open/close state (controllable via open and onOpenChange props), and ensures accessibility. The content is typically rendered in a portal to avoid clipping issues.

Pagination Progress