Popover
A floating non-modal overlay anchored to a trigger. Use for detail cards, filter panels, or any contextual content that doesn't need to block interaction.
Built on Radix UI.
- ✓8 placement positions via side + align props
- ✓Animates in/out with Tailwind data-state utilities
- ✓Renders in a Portal — never clipped by overflow:hidden parents
- ✓Closes on Escape, outside click, and when trigger unmounts
import { Popover }from "@aetherstack/ui"
popover.tsx
import { Popover, PopoverContent, PopoverTrigger } from "@aetherstack/ui"
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">Open popover</Button>
</PopoverTrigger>
<PopoverContent>
<p className="text-sm">Popover content goes here.</p>
</PopoverContent>
</Popover>Usage
Alignment
Control the horizontal alignment of the popover relative to the trigger.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "center" | Horizontal alignment of the popover relative to the trigger. |
| sideOffset | number | 4 | Gap in pixels between the trigger and the popover. |
| side | "top" | "right" | "bottom" | "left" | "bottom" | Which side to open on. |
| className | string | — | Additional classes on PopoverContent. |
* Required props
Accessibility
- →PopoverTrigger sets aria-expanded and aria-controls automatically.
- →The popover panel has role="dialog" — focus moves into it on open.
- →Escape closes the popover and returns focus to the trigger.