Popover

Non-modal floating panel with Dialog's visual treatment, wrapping Radix Popover.

Popover wraps @radix-ui/react-popover. It shares DialogContent's treatment (surface, bg-popover, animate-scale-in) but is non-modal — the page stays interactive while it's open.

Installation

import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "@iammikz/srui";

Usage

Props

Export	Notes
`Popover`	Root; `open`/`onOpenChange` for controlled use
`PopoverTrigger`	The toggle target (`asChild` supported)
`PopoverAnchor`	Position against an element without making it the trigger
`PopoverContent`	The panel; `align` (default `"center"`), `sideOffset` (default `6`), Radix Content props
`PopoverClose`	Closes the popover on click/activation

Examples

Anchored, aligned start

Anchor element

Closing from inside

Wrap a control in PopoverClose (it takes asChild) to close the popover from inside the content — it renders as a button that dismisses on click or keyboard activation:

<PopoverContent className="w-64">
  <p className="text-sm">Settings applied.</p>
  <PopoverClose asChild>
    <Button variant="outline" size="sm">Done</Button>
  </PopoverClose>
</PopoverContent>

Accessibility

Radix wires aria-expanded/aria-controls on the trigger; Escape closes and returns focus to the trigger; outside clicks dismiss. Because it is non-modal, focus is not trapped — don't put critical flows in a popover that would be lost by an outside click.