Surfaces

Popover

Reka-UI-backed anchored panel for filter dropdowns, profile menus, and focused interactions tied to a trigger.

Overview

Popover is the Reka-UI-backed anchored panel. Use it for filter dropdowns, profile menus, and any focused interaction that should appear next to its trigger. Auto-imports as <LPopover>.

The wrapper forwards defaultOpen, open, and modal to Reka's PopoverRoot. Positioning is not automatic: collision avoidance is configured per call site through PopoverContent props from Reka UI (for example :side-offset, :collision-padding, :avoid-collisions). Tune those on the content element when you need a panel to stay on-screen.

Key Business & UX Benefits

One anchored panel handles filter dropdowns, profile menus, and quick actions, so every floating UI on the storefront behaves the same on hover, focus, and dismissal.
Reka's collision props on PopoverContent give per-surface control to keep panels on-screen, so teams can tune mobile vs. desktop without forking the primitive.
Reka UI ships keyboard and click-outside dismissal, so teams skip the bug class around stuck overlays and ship faster.
Drop-in trigger and content composition lets product teams attach a contextual panel to almost any element without restructuring the surrounding layout.

Usage

Popover Default

<Popover>
    <PopoverTrigger>
      <Button>Open</Button>
    </PopoverTrigger>
    <PopoverContent>
      Panel content here.
    </PopoverContent>
  </Popover>

Feature List

Forwards `defaultOpen`, `open`, and `modal` to reka-ui's `PopoverRoot`, so both uncontrolled and controlled use are first-class
Per-call positioning via `PopoverContent` props like `side-offset`, `collision-padding`, and `avoid-collisions` for surface-specific tuning
Three-part composition (`Popover`, `PopoverTrigger`, `PopoverContent`) keeps the floating-panel structure explicit at the call site
Reka UI ships keyboard dismissal (escape) and outside-click handling, so panels never get stuck open
Auto-imports as `<LPopover>`, paired with `<LPopoverTrigger>` and `<LPopoverContent>` for each instance

API Reference

Prop	Default	Type
`defaultOpen`	`false`	`boolean`
`open`		`boolean`
`modal`	`false`	`boolean`

Slot	Type
`default`	`{}`

Event	Type
`update:open`	`(event: "update:open", value: boolean): void`

Slot	Type
`default`	`{}`

Prop	Default	Type
`side`		`"left" \| "right" \| "top" \| "bottom"`
`align`		`"center" \| "start" \| "end"`
`sideOffset`		`number`
`alignOffset`		`number`
`width`		`string`

Slot	Type
`default`	`{}`

Edit this pageorReport an issue

Alert Dialog

Modal dialog for confirming critical actions with focus trap and keyboard navigation.

Sheet

Slide-in panel surface for overlaying content such as carts, filters, or detail views without leaving the page.