Basic
With Form
Sides
With Close Button
Sub-components
| Component | Description |
|---|---|
| Popover | Root provider (controls open/close state) |
| Popover.Trigger | Element that opens the popover on click |
| Popover.Content | The floating panel with content |
| Popover.Close | Element that closes the popover |
Content Props
| Prop | Type | Description |
|---|---|---|
| side | "top" | "right" | "bottom" | "left" | Preferred side to render against the trigger |
| sideOffset | number | Distance in pixels from the trigger (default: 4) |
| align | "start" | "center" | "end" | Alignment against the trigger (default: center) |
| modal | boolean | Whether the popover is modal (Root prop, default: false) |
| className | string | Additional classes on the popover content |
Usage
<Popover>
<Popover.Trigger asChild>
<Button>Open</Button>
</Popover.Trigger>
<Popover.Content side="bottom">
<p>Popover content here.</p>
<Popover.Close asChild>
<Button size="sm">Close</Button>
</Popover.Close>
</Popover.Content>
</Popover>