Popover

Popover shows floating, interactive content anchored to a trigger element.

Unlike Tooltip, Popover opens on click and can hold buttons and short forms. Its surface uses the shared popoverSurfaceClass (shadow-16, rounded-medium), like HoverCard, Combobox and DatePicker.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Popover, PopoverTrigger, PopoverSurface, PopoverClose } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Appearance

normal (default), brand for teaching and onboarding, inverted.

Short form

Edit a single value without opening a Dialog.

Usage

Keep the content short and focused on one task.
Give people a clear way to close it (a button, Esc, a click outside).

Don't

Don't put long or multi-step forms in it. Use Dialog or Drawer.
Don't use Popover for plain annotations. Use Tooltip.

Props

Prop · Type	Default	Description
Popover.open / onOpenChangeboolean / (open) => void	Default: —	Controls the open state.
PopoverSurface.size"small" \| "medium" \| "large"	Default: "medium"	Padding 8 / 16 / 20px.
PopoverSurface.appearance"normal" \| "brand" \| "inverted"	Default: "normal"	Surface color.
PopoverSurface.withArrowboolean	Default: false	Shows the arrow.
PopoverSurface.material"glass" \| "glass-clear"	Default: —	Yugen Labs — a glass surface (the arrow matches it) that grows out of the button that opens it.
PopoverSurface.side / alignRadix	Default: "bottom" / "center"	Position relative to the trigger.