Popover
Displays rich content in a portal, triggered by a button.
Loading example…
Installation
bunx --bun shadcn@latest add @sui/popoverInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import {
Popover,
PopoverContent,
PopoverDescription,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@workspace/ui/components/popover"<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
Open Popover
</PopoverTrigger>
<PopoverContent>
<PopoverHeader>
<PopoverTitle>Title</PopoverTitle>
<PopoverDescription>Description text here.</PopoverDescription>
</PopoverHeader>
</PopoverContent>
</Popover>Composition
Use the following composition to build a Popover:
Popover
├── PopoverTrigger
└── PopoverContentBasic
A simple popover with a header, title, and description.
Loading example…
Align
Use the align prop on PopoverContent to control the horizontal alignment.
Loading example…
With Form
A popover with form fields inside.
Loading example…
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Loading example…
API Reference
See the Base UI Popover documentation.