Popover
stableDisplays rich content in a portal, triggered by a button.
Basic usage
Examples
With form fields
Use a Popover to surface an inline settings panel near its trigger.
Inline settings panel
Popover works well for compact settings that should stay near the trigger.
Features
- Can be controlled or uncontrolled.
- Customize side, alignment, offsets, collision handling.
- Optional rendering of a positioned arrow.
- Focus is fully managed and customizable.
- Dismissing and layering behaviour is highly customizable.
Installation
bash
pnpm dlx structyl add popoverAPI Reference
Popover API reference
Full props, types, defaults, and all 7 parts.
Keyboard interactions
| Key | Description |
|---|---|
| Space / Enter | Opens / closes the popover. |
| Tab | Moves focus to the next focusable element. |
| Esc | Closes the popover and returns focus to the trigger. |