Components

Popover

Radix-powered floating panel anchored to a trigger. Used for supplementary content (settings snippets, help, notifications) that doesn't warrant a Dialog.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Set weight</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="flex flex-col gap-3">
      <Label htmlFor="weight">Weight</Label>
      <Input id="weight" defaultValue="0.85" />
      <Button size="sm">Apply</Button>
    </div>
  </PopoverContent>
</Popover>

When to use

  • Small forms or previews launched from a control.
  • Notifications tray triggered by the bell IconButton.

When not to use

  • For focused editing that needs the full page context — use Sheet or Dialog.
  • For informational tooltips — use Tooltip.

Usage

Do
  • Keep the content under 400px tall.
  • Anchor it to a real trigger — never floating without one.
Don't
  • Don't stack Popovers.
  • Don't rely on a Popover for critical decisions — use Dialog.