Popover

A floating panel that displays information or interactive content, triggered by a button.

Installation

$ npx shadcn@latest add "/r/popover.json"

Control the position of the popover using the side and align props.

Prop	Type	Default	Description
side	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	The preferred side of the trigger to render against when open.
sideOffset	`number`	`10`	The distance in pixels from the trigger.
align	`"start" \| "center" \| "end"`	`"center"`	The preferred alignment against the trigger.
className	`string`	-	Additional CSS classes to apply to the content.