Feedback & OverlaysFree

Popover

A floating panel anchored to a trigger element.

Usage

bash

npx wunderui-cli add popover

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

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

The popover opens below its button — click it.

The popover opens above its button — click it.

The popover opens to the left of its button — click it.

The popover opens to the right of its button — click it.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A popover with a form and actions, opened from a toolbar button.