@edux-design/popovers

Thin, design-token-aware wrappers around Radix UI’s popover primitives. Use them directly or via higher-level components (menus, tooltips, etc.).

Exports: PopoverProvider, Popover, PopoverTrigger, PopoverAnchor, PopoverPortal, PopoverContent, PopoverClose.

Installation

pnpm add @edux-design/popovers @radix-ui/react-popover @edux-design/utils
# or
npm install @edux-design/popovers @radix-ui/react-popover @edux-design/utils

Peer deps: react@^19.1.0, react-dom@^19.1.0.

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverClose,
} from "@edux-design/popovers";

export function HelpPopover() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <button className="underline text-sm">Need help?</button>
      </PopoverTrigger>
      <PopoverContent side="right" className="max-w-xs">
        <p className="text-sm">
          Reach out to [email protected] for additional guidance.
        </p>
        <PopoverClose className="absolute top-2 right-2 text-xs underline">
          Close
        </PopoverClose>
      </PopoverContent>
    </Popover>
  );
}

PopoverContent props

• side, align, sideOffset, alignOffset, avoidCollisions, forceMount
• showArrow (adds the Radix arrow SVG)
• className / style
• contentProps for passing any other Radix content props

Everything is wrapped in PopoverPortal so content escapes stacking context issues by default.

Development

pnpm --filter @edux-design/popovers lint
pnpm --filter @edux-design/popovers check-types
pnpm --filter @edux-design/popovers build

Stories: src/demos/Popover.stories.jsx.

Notes

• Since these components forward all props to Radix, refer to the Radix documentation for advanced features (modals, anchors, collision handling).
• The default surface uses the bg-fg-base / text-fg-invert combo; override via Tailwind classes when you need alternate skins.
• Consumers should wrap popovers in PopoverProvider if they need to tweak the default delay group or share open states.