Demo

Popover

A floating panel that appears next to a trigger element. Supports click-outside-to-close, multiple placements, and both controlled/uncontrolled modes.

Basic Popover

Simple popover with text content.

Placements

Popover can appear on any side of the trigger.

With Controls

Popover containing interactive controls like sliders.

Settings Panel

Complex popover with multiple controls.

Controlled Mode

Parent component controls the open state.

State: closed

Custom Offset

Adjust the distance between trigger and popover.

No Close on Outside Click

Popover stays open when clicking outside.

DAW Usage Example

Quick access panels for track settings.

Behaviors

Popover interaction options.

Triggers

  • Click trigger - Toggle popover open/closed
  • Click outside - Close popover (configurable)
  • Escape - Close popover

Props

  • placement - top, bottom, left, right
  • offset - Distance from trigger (default: 8px)
  • closeOnClickOutside - Close on outside click (default: true)
  • open / onOpenChange - Controlled mode

Content

  • Can contain any React content
  • Interactive elements work normally
  • Style content with padding as needed