Get Started
OverlaysUpdated May 3, 2026

Popover

A lightweight contextual surface anchored to a trigger.

#Default usage

Default popoverPopover is elevated but intentionally light.

#Usage

Code
import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Switch,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild><Button variant="secondary">Open popover</Button></PopoverTrigger>
      <PopoverContent>
        <div className="docs-preview-stack">
          <strong>Preview settings</strong>
          <span className="docs-preview-muted">Contextual controls stay near the trigger.</span>
          <Switch aria-label="Preview updates" defaultChecked />
        </div>
      </PopoverContent>
    </Popover>
  );
}

#Accessibility

Popover uses Radix behavior for dismissing, focus handling, portal layering, and trigger association.

#API

  • PopoverContent supports align, side, sideOffset, and className.
  • PopoverTrigger supports asChild.
  • PopoverArrow is exported when an arrow is needed.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page