Popover

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/popover

npx shadcn@latest add http://localhost:3002/r/popover.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/popover; inside this monorepo, from @rabtx/ui/popover.

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@rabtx/ui/popover";

export function Dimensions() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="secondary">Dimensions</Button>
      </PopoverTrigger>
      <PopoverContent side="bottom" align="center" sideOffset={8}>
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>Set the width and height of the layer.</PopoverDescription>
        </PopoverHeader>
        …
      </PopoverContent>
    </Popover>
  );
}

The parts are shadcn's, with the same data-slot names. PopoverContent is a [popover] element and PopoverTrigger its native invoker (popovertarget), so the browser does the hard parts: the panel sits in the top layer above everything (dialogs included), a press outside or Escape closes it, focus goes back to the trigger, and it opens before the page hydrates. The panel is role="dialog", named by PopoverTitle and described by PopoverDescription without ids passed by hand; on open, focus moves to its first field.

SidesCopy Anchor Link

side is top, right, bottom (default) or left. When the panel would not fit there, position-try-fallbacks flips it to the other side, and the unfold still starts at the trigger.

AlignCopy Anchor Link

align lines the panel up with the trigger's start edge, its center (default) or its end edge. A start- or end-aligned panel that would overflow flips to the other edge.

Controlled, with a close buttonCopy Anchor Link

open and onOpenChange follow every change, whatever made it. PopoverClose is a native popovertargetaction="hide": wrap a Cancel button in it with asChild.

APICopy Anchor Link

Popover holds the state and renders nothing itself:

PopoverContent takes everything a div takes (on the [popover] element), plus:

PopoverTrigger and PopoverClose render a button, or with asChild pass their props to the one child, which must forward them to a <button> (our Button does). PopoverHeader and PopoverTitle are divs and PopoverDescription a p.

Outside React, popoverParts from @rabtx/ui/popover/styles gives the class names; the Popover API and anchor positioning need no script at all:

<button popovertarget="size" style="anchor-name: --size">Dimensions</button>
<div id="size" popover role="dialog" class="rx-popover" data-side="bottom" data-align="center"
     style="position-anchor: --size">
  <div class="rx-surface rx-popover-surface rx-popover-content">…</div>
</div>

ThemingCopy Anchor Link

The Popover reads only the theme tokens.

There is no cast shadow: the raised edge and its hairline ring separate the panel from the page.

How it worksCopy Anchor Link

JavaScript only keeps the open state in step with the element and writes data-flip. Reduced motion keeps a 120ms fade; data-motion="off" shows and hides it at once.

Browser supportCopy Anchor Link

• Chromium 133+: everything, including the invoker source that keeps a press on the trigger from counting as a press outside.
• Safari 26 and Firefox with anchor positioning: the same. Without anchor positioning the browser centers the panel in the viewport, which is still usable; without overlay the exit is instant.

AccessibilityCopy Anchor Link

• The trigger has aria-haspopup="dialog", aria-expanded and aria-controls.
• The panel is a non-modal role="dialog", labelled by its title and described by its description when they are present. Focus moves to its first focusable element (or the panel) on open, and back to the trigger on Escape or close.
• Tab moves from the trigger into the open panel and on out of it in document order, as the Popover API defines.