Components

Popover

Anchored surface for filters, quick actions, and settings. Prefer it over a modal for anything under two rows of controls.

When to usefor short-lived, anchored surfaces — filters, inline settings, quick pickers — that don't need to block the page.

Import

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from "@ravnhq/efni/popover"

Filter

<Popover>
  <PopoverTrigger render={<Button variant="outline">Filter</Button>} />
  <PopoverContent align="start">
    <PopoverHeader>
      <PopoverTitle>Filter missions</PopoverTitle>
      <PopoverDescription>Status includes…</PopoverDescription>
    </PopoverHeader>
    …checkboxes…
  </PopoverContent>
</Popover>

Alignment

<PopoverContent align="start" | "center" | "end" />

Do & don't

Use a Popover for compact, non-blocking controls that stay tied to their trigger.

Filter missions

A whole modal for two checkboxes.

Don't reach for a Dialog when the whole surface would fit inside a Popover.

Accessibility

Key	Action
`Tab`	Cycles focus inside the open content.
`Esc`	Closes the popover and returns focus to the trigger.

Focus traps inside the content while open; closes on outside click or Esc.
The trigger owns aria-expanded and aria-controls — no manual wiring needed.

Guidelines

Keep the content under three lines of controls — anything larger belongs in a Sheet or Dialog.
Anchor to the trigger that generated it — don't relocate on scroll.
Provide a clear commit action (Apply / Save) or auto-apply on change.

Don't

Don't nest a Popover inside a Popover — pick one surface.
Don't put confirm-then-act flows here — use Alert dialog.
Don't pack a full form inside — surface it on the page or in a Sheet.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the popover is currently open.
`defaultOpen`	`boolean`	`false`	Whether the popover is initially open. To render a controlled popover, use the `open` prop instead.
`onOpenChange`	`((open: boolean, eventDetails: PopoverRoot.ChangeEventDetails) => void)`	—	Event handler called when the popover is opened or closed.
`PopoverContent.align`	`"center" \| "start" \| "end"`	`"center"`	How to align the popup relative to the specified side.
`PopoverContent.side`	`"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"`	`"bottom"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`…props`	`PopoverPrimitive.Root.Props`	—	Everything Popover passes to the element it renders.