Popover
A floating panel that displays content above other page content.
Import
Usage
Placements
Variants
Radius
Shadow
Controlled
Custom Anchor (Doesnt Work!)
Anchor Element
Popover Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state of the popover. |
| defaultOpen | boolean | false | Default open state for uncontrolled usage. |
| onOpenChange | (open: boolean) => void | - | Callback when the open state changes. |
| modal | boolean | false | Whether the popover should behave as a modal, trapping focus and blocking interaction with the rest of the page. |
PopoverTrigger Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element instead of rendering a button wrapper. |
PopoverContent Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| placement | 'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom' | The placement of the popover relative to the trigger. |
| variant | 'default' | 'bordered' | 'default' | The visual variant of the popover. Bordered adds border-1 border-divider. |
| offset | number | 8 | Distance from the trigger in pixels. |
| radius | 'sm' | 'md' | 'lg' | 'md' | Border radius size of the popover. |
| shadow | 'sm' | 'md' | 'lg' | 'md' | Shadow size of the popover. |
| className | string | - | Additional CSS classes for styling. |
PopoverAnchor Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element. Use to anchor the popover to a different element than the trigger. |
