Popover

Popover defines how EnterUI handles a lightweight contextual surface anchored to a trigger, including default structure, accessible states, and token-driven styling.

#Default usage

<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>

#Import

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

#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.