Popover

Popover is the kit's floating panel, a styled layer over Ark UI's Popover. Ark owns the open/close state, positioning, focus and Esc / click-outside; the kit adds the portaled, animated panel chrome and three composable slots. It's a panel, not a menu — you render your own rows inside Body, so it hosts anything: a custom picker, a filter popover, the TreeMultiSelect tree.

import { Popover } from '@42/ui-react/popover';

<Popover.Root open={open} onOpenChange={(d) => setOpen(d.open)}>
  <Popover.Trigger asChild>
    <Button>Open</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Popover.Header>…</Popover.Header>   {/* fixed */}
    <Popover.Body>…</Popover.Body>       {/* scrolls */}
    <Popover.Footer>…</Popover.Footer>   {/* fixed */}
  </Popover.Content>
</Popover.Root>

Basic usage

open / onOpenChange make it controlled. Header and Footer stay fixed while Body scrolls; the panel is portaled, so it escapes overflow: hidden ancestors, and its height tracks the available space up to a cap.

const [open, setOpen] = useState(false);<Popover.Root open={open} onOpenChange={(d) => setOpen(d.open)}>  <Popover.Trigger asChild>    <Button>Open popover</Button>  </Popover.Trigger>  <Popover.Content>    <Popover.Header>Filters</Popover.Header>    <Popover.Body className="flex flex-col gap-3">      <Text size="sm" c="muted">Narrow the list down to what you're looking for.</Text>      <Switch label="Show archived" size="sm" />      <Switch label="Only mine" size="sm" defaultChecked />    </Popover.Body>    <Popover.Footer>      <Button size="xs" variant="subtle">Reset</Button>      <Button size="xs">Apply</Button>    </Popover.Footer>  </Popover.Content></Popover.Root>

Positioning

width="target" (default) matches the trigger's width; position sets the placement and offset the gap. The panel flips and shifts to stay in view (Ark / Floating UI).

<Popover.Root position="bottom-start" width="target">…</Popover.Root><Popover.Root position="top" width="auto" offset={8}>…</Popover.Root>

Anatomy

• Popover.Root — wraps Ark's Popover.Root; owns open state + positioning.
• Popover.Trigger — the trigger; use asChild to wrap your own element.
• Popover.Content — the portaled, animated panel.
• Popover.Header / Popover.Footer — fixed, non-scrolling slots.
• Popover.Body — the scroll region; render your rows (and any empty message) here.

API

Popover.Root props (beyond Ark's Popover.Root):