Popover
Displays rich content in a portal, triggered by a button.
Installation
Usage
<Popover>
<Popover.Trigger render={<Button variant=Outline />}>
{"Open Popover"->React.string}
</Popover.Trigger>
<Popover.Content>
<h4 className="leading-none font-medium"> {"Title"->React.string} </h4>
<p className="text-muted-foreground text-sm"> {"Description text here."->React.string} </p>
</Popover.Content>
</Popover>Examples
Basic
A simple popover with a header, title, and description.
Align
Use the align prop on PopoverContent to control the horizontal alignment.
With Form
A popover with form fields inside.
API Reference
See the Base UI Popover documentation.