Popover

Floating content anchored to a trigger. It grows out of its trigger, whichever side it lands on.

OverlaysRadix Popover

Playground

Tweak the props, the preview and the code follow.

Props

side

align

sideOffset6

showArrow

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

Installation

npx @plumsydev/plum-ui add popover

Usage

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

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content here.</PopoverContent>
</Popover>

Examples

Controlled picker

Control open to close the popover after a selection.

Filters

A popover that drives the UI behind it. Toggle a status and the list animates.

Issues

PLM-142Toast stack jumps on resizeHigh
PLM-139Calendar keyboard navigationMedium
PLM-128Command palette fuzzy rankingMedium
PLM-121Drawer snap points on iOSHigh

API Reference

Prop	Type	Default
`open` Controlled open state.	`boolean`	`—`
`onOpenChange` Called when the open state changes.	`(open: boolean) => void`	`—`
`modal` Blocks outside interaction while open.	`boolean`	`false`

PopoverContent

Prop	Type	Default
`side` Preferred side of the trigger.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"center"`
`sideOffset` Distance from the trigger in px.	`number`	`6`
`collisionPadding` Space kept between the content and the viewport edges.	`number`	`0`
`showArrow` Adds an arrow that points at the trigger, with the border wrapped around it.	`boolean`	`false`

Notes

The open animation uses Radix's transform-origin variable, so the content always scales from the trigger — even after flipping sides.

PreviousPassword Input NextProgress