Basic
Controlled
Icon-only trigger
With header & actions
Alignment
align positions the panel relative to the trigger — not the trigger on the page. Triggers stay left-aligned here so you can compare panel placement.
Opens above
Compact
Animation variants
Panels use spring enter/exit by default (like Animate UI Popover). Press variants affect the trigger; enter variants affect the panel open/close.
animationVariant — click each control to compare press feedback.
enterAnimationVariant — open and close each panel to compare fluid spring motion (default, spring, zoom) vs legacy ease presets.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| trigger | Optional | ReactNode | — | Button, IconButton, or control that opens the popover. |
| children | Optional | ReactNode | — | Panel content. |
| side | Optional | "top" | "bottom" | bottom | Open below or above the trigger. |
| align | Optional | "start" | "center" | "end" | start | How the panel aligns to the trigger along the placement edge (not page layout). |
| density | Optional | "default" | "compact" | default | Panel padding scale. |
| open / onOpenChange | Optional | boolean + callback | — | Controlled visibility. |
| label | Optional | string | — | Accessible dialog label. |
| PopoverHeader / PopoverFooter | Optional | subcomponents | — | Structured title, description, and action row. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |
| enterAnimationVariant | Optional | EnterAnimationVariant | default | Panel enter/exit — default and spring use fluid spring physics (Animate UI–style); zoom is a stronger pop; subtle keeps legacy ease motion; fade, slide-*, scale, or none. |