Popover

A small, nonmodal task panel anchored to its trigger.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Project viewAll projects

Showing: all projects. Local sample data.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add popover

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Popover>
  <PopoverTrigger>Project filters</PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Filter projects</PopoverTitle>
    <PopoverDescription>Choose a project status.</PopoverDescription>
    <Field label="Status"><NativeSelect><option>Active</option><option>Archived</option></NativeSelect></Field>
    <PopoverClose>Done</PopoverClose>
  </PopoverContent>
</Popover>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Root: open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	`uncontrolled, closed`
`Content: side / align`	`top \| right \| bottom \| left / start \| center \| end`	`bottom / start`
`Content: sideOffset / collisionPadding`	`number (px)`	`8 / 8`
`Content: initialFocusRef / returnFocusRef`	`RefObject<HTMLElement \| null>`	`first focusable / trigger`
`Trigger / Close`	`ButtonProps and native button refs`	`secondary`

Accessibility

Provide one PopoverTitle (or an explicit aria-label/aria-labelledby), an explicit close action, and optionally one short PopoverDescription. Content is a nonmodal dialog in the browser popover top layer. Focus moves to the first focusable control or Content; initialFocusRef must target a visible descendant. Tab is not trapped: moving focus outside requests closing. Escape closes the top floating layer and restores the invoker; outside press/release requests closing without stealing focus from an outside focusable destination. Nested panels close one layer per Escape or outside gesture. The page remains interactive and scrollable. Content follows resize/scroll, flips when the preferred side has insufficient room, clamps to the visual viewport, and requests closing if its anchor is clipped out of view. Start/end alignment follows RTL on top/bottom placements. Open state is consumer-owned when controlled, so consumers must honor onOpenChange to dismiss. Root has no DOM/ref; Trigger and Close refs target buttons, Content a div, Title h3, Description p. Native popover support and ResizeObserver are required. Do not nest interactive trigger elements, use multiple title/description parts, add positive tabindex, or use a popover for a modal confirmation. Content stays mounted while closed.