Popover
An accessible popup anchored to a button.
Loading...
Loading code...
Installation
Usage
import {
Popover,
PopoverClose,
PopoverDescription,
PopoverPopup,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover"<Popover>
<PopoverTrigger>Open Popover</PopoverTrigger>
<PopoverPopup>
<PopoverTitle>Popover Title</PopoverTitle>
<PopoverDescription>Popover Description</PopoverDescription>
<PopoverClose>Close</PopoverClose>
</PopoverPopup>
</Popover>Examples
With Close Button
Loading...
Loading code...
Comparing with Radix / shadcn
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.
Quick Checklist
- Replace
asChild→renderonPopoverTriggerand closing buttons - Prefer
PopoverPopup;PopoverContentremains for legacy - If you used
asChildon any other parts, switch to therenderprop
Additional Notes
Base UI introduces PopoverTitle and PopoverDescription to structure headings and helper text inside the popup. Base UI also introduces a PopoverClose component for adding close buttons to the popup.
Comparison Example
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Open Popover</Button>
</PopoverTrigger>
<PopoverContent>
<h2>Popover Title</h2>
<p>Popover Description</p>
</PopoverContent>
</Popover><Popover>
<PopoverTrigger render={<Button variant="outline" />}>
Open Popover
</PopoverTrigger>
<PopoverPopup>
<PopoverTitle>Popover Title</PopoverTitle>
<PopoverDescription>Popover Description</PopoverDescription>
<PopoverClose render={<Button variant="ghost" />}>Close</PopoverClose>
</PopoverPopup>
</Popover>