Feedback & OverlaysFree

Popover

A floating panel anchored to a trigger element.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverTrigger,
} from "@wunderui/react"

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.