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 variant="default">Open popover</Button></Popover.Trigger><Popover.Content>  <Popover.Header>Intra</Popover.Header>  <Popover.Body>    {items.map((i) => <button key={i}>{i}</button>)}  </Popover.Body>  <Popover.Footer>    <Button size="xs" variant="subtle">Close</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):