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>
    <VStack align="stretch" gap={12} fullWidth>
      <strong>Preview settings</strong>
      <Text as="span" tone="muted">Contextual controls stay near the trigger.</Text>
      <Switch aria-label="Preview updates" defaultChecked />
    </VStack>
  </PopoverContent>
</Popover>

#Import

import { Button, Popover, PopoverContent, PopoverTrigger, Switch, Text, VStack } 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.