Popover

Radix-backed floating panel anchored to a trigger, with alignment and offset props.

A floating panel anchored to a trigger, built on Radix Popover. PopoverContent is portalled, positioned below its trigger with a blurred, translucent surface, and animates in and out. Use it for rich, non-modal overflow content — forms, menus, or detail cards.

Import

tsx

1import {
2  Popover,
3  PopoverTrigger,
4  PopoverContent,
5  PopoverClose,
6} from "@yuhuanowo/yunui";

Basic

Popover

Alignment

PopoverContent accepts Radix's align (start / center / end) and sideOffset props to fine-tune where the panel sits relative to its trigger.

Aligned to the start

Parts

Part	Role
`Popover`	Root; holds `open`/`onOpenChange` (or runs uncontrolled).
`PopoverTrigger`	Element that toggles the panel (use `asChild` to wrap a `Button`).
`PopoverContent`	Portalled, animated floating panel; accepts `align` and `sideOffset`.
`PopoverClose`	Element that closes the popover when activated.

Popover re-exports Radix Popover parts with design-system styling. See the Radix Popover docs for the complete prop reference, including PopoverAnchor and positioning props.

Import

Basic

Alignment

Parts

On this page