Documentation
Overlays

Popover

A floating surface positioned against a trigger: the `popup.content` box of dropdown-menu, plus Title, Description and Close through `render`.

npx shadcn@latest add @fragiola/popover
Popover
Gallery

popup.content, not layer.panel

A popover is positioned by a floating-ui positioner and sized by --available-height; a dialog panel is not. The overlap (raised surface, border, radius, shadow) is checked, not assumed — and it is small enough that unifying them would couple a positioned surface to a centring transform it does not use. They stay separate: layer.panel for modal surfaces, popup.content for positioned surfaces.

Title and description point at Text

Popover.Title is Text.Heading as="h2" wearing the primitive's a11y wiring, stitched with render. Popover.Description is Text.Paragraph. The close affordance is Clickable.Button variant="icon", positioned with logical properties.

Parts

PartSource
Root / TriggerBase UI Popover
Contentpopup.content() + Portal + Positioner
TitleText.Heading as="h2" via render
DescriptionText.Paragraph via render
CloseClickable.Button via render