Overlays

Popover

A floating panel anchored to a trigger, for filters and compact detail.

BetaNew shared patternRegistry JSON

Aditi Rao

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add popover

Writes components/ui/popover.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverAnchor,
} from "@/components/ui/popover";

Props and composition points for Popover. Native element props pass through.

Prop	Type	Default	Description
`open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	None	Controlled or uncontrolled visibility.
`PopoverContent align / sideOffset`	`"start" \| "center" \| "end" / number`	"center" / 6	Placement relative to the trigger.
`aria-label / aria-labelledby`	`string`	None	The panel is a dialog and needs a name when it has no visible heading.
`className`	`string`	None	Width and layout adjustments. The default is 288px.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Content renders in a portal with role dialog and is not modal by default, so the page remains reachable.
Escape closes the panel and returns focus to the trigger; clicking outside also dismisses it.
Give the panel a name with a heading and aria-labelledby, or aria-label when the content has no heading.
Use Popover for interactive content. A sentence of explanation belongs in Tooltip, and a blocking decision belongs in Dialog.

Key	Action
`Enter`or`Space`	Open the popover from the trigger.
`Tab`or`Shift`+`Tab`	Move through the controls inside the panel.
`Escape`	Close and return focus to the trigger.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.