pnpm dlx shadcn@latest add https://ui.saturation.io/r/popover.jsonimport {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent>
Place content here.
</PopoverContent>
</Popover>The root component that manages popover state.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
defaultOpen | boolean | false | The default open state for uncontrolled usage. |
The element that toggles the popover.
The floating content panel.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "center" | Alignment of the popover relative to the trigger. |
sideOffset | number | 4 | Distance in pixels from the trigger. |
side | "top" | "right" | "bottom" | "left" | "bottom" | The side the popover appears on. |