Popover

popover="auto" on the content, and popoverTarget on the trigger, that's it: outside-click dismissal, Escape to close, and top-layer stacking are all native HTML attribute behaviour, not JavaScript click-outside listeners. Positioning is CSS anchor positioning where supported, a computed fallback otherwise.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

placement

align

offset (px)

trigger label

Usage

<Popover render={<Button variant="secondary">Distance</Button>}>
  <RadioGroup label="Distance from me" value={distance} onValueChange={setDistance}>
    <RadioGroupItem value="1">Within 1 mile</RadioGroupItem>
    <RadioGroupItem value="5">Within 5 miles</RadioGroupItem>
  </RadioGroup>
</Popover>

<kernel-popover >
  <kernel-button slot="trigger" variant="secondary">Distance</kernel-button>
  <kernel-radio-group label="Distance from me" value="5">
    <kernel-radio-group-item value="1">Within 1 mile</kernel-radio-group-item>
    <kernel-radio-group-item value="5">Within 5 miles</kernel-radio-group-item>
    <kernel-radio-group-item value="10">Within 10 miles</kernel-radio-group-item>
    <kernel-radio-group-item value="any">Any distance</kernel-radio-group-item>
  </kernel-radio-group>
</kernel-popover>

Props

Props for Popover.
Prop	Type	Default
`render`	the trigger element (required)	—
`renderContent`	RenderProp — replace the panel	—
`className`	string \| (state) => string	—
`placement`	"top" \| "bottom" \| "left" \| "right"	"bottom"
`align`	"start" \| "center" \| "end"	"center"
`offset`	number (px)	8
`open` / `onOpenChange`	boolean / (open) => void	—

Composition

The panel exposes data-slot="popover-content",data-placement, data-align, anddata-open, the same styling hooks Tooltip and DropdownMenu expose, so one set of CSS can target every anchored surface.