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.

Usage

import { useState } from "react";
import { Button, Popover, RadioGroup, RadioGroupItem } from "@kernelui/react";

function DistanceFilter() {
  const [distance, setDistance] = useState("5");

  return (
    <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>
  );
}

Props

Prop	Type	Default
`render`	the trigger element (required)	—
`placement`	"top" \| "bottom" \| "left" \| "right"	"bottom"
`open` / `onOpenChange`	boolean / (open) => void	—