Skip to content

Popover

Floating content anchored to a trigger element. Non-modal and keyboard accessible. Built on Radix UI.

$cookest-ui add popover

Nutrition Info

Display compact nutritional info in a popover on hover or click.

Serving Size Adjuster

Use a popover to adjust settings inline without a full modal.

PropTypeDefaultDescription
PopoverTriggerReactNodeThe element that opens the popover.
PopoverContentReactNodeThe floating panel content.
side"top" | "right" | "bottom" | "left""bottom"Which side of the trigger the popover appears on.
align"start" | "center" | "end""center"Alignment of the popover relative to the trigger.