Popover

v1.0.12

Ready for Production

Catalyst Popover wraps Radix UI Popover to provide a click-triggered overlay for rich, interactive content — forms, lists, actions — with Catalyst design token styling and smooth entrance animations out of the box.

Installation

npm install @pmi/catalyst-popover

import {
  PopoverRoot,
  PopoverTrigger,
  PopoverContent,
  PopoverArrow,
  PopoverPortal,
  PopoverAnchor,
  PopoverClose,
} from '@pmi/catalyst-popover';

Tailwind Config

The package ships a Tailwind preset with slide-and-fade entrance animations. Add it to your config:

import tailwindPopoverPreset from '@pmi/catalyst-popover/tailwind.config';

export default {
  content: ['./src/**/*.{ts,tsx,js,jsx}', './node_modules/@pmi/catalyst-*/**/*.{ts,tsx,js,jsx}'],
  presets: [tailwindPopoverPreset],
};

Common Patterns

Arrow

Side

Align

Portal

Precomposed

List View

API Reference

PopoverRoot

Root container that manages open/close state. Renders no DOM element itself.

PopoverTrigger

Button that opens the popover on click. Ships with Catalyst focus-visible ring styles.

PopoverContent

The floating panel containing popover content. Ships with Catalyst default dark/light background, padding, and animation classes.

PopoverArrow

Optional arrow element pointing toward the trigger. Use [&_.popover-arrow]:fill-* on PopoverContent to match the arrow colour to a custom background.

PopoverPortal

Portals PopoverContent to document.body for z-index isolation. Accepts the standard Radix Popover Portal props (container, forceMount).

PopoverAnchor

Positions the popover against a custom element instead of the trigger.

PopoverClose

Button inside the popover that dismisses it when clicked.

Accessibility

Popover is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• PopoverTrigger receives aria-expanded and aria-controls toggled by Radix automatically.
• PopoverContent receives role="dialog" from Radix and is announced when it opens.
• Add aria-label or aria-labelledby to PopoverContent when the popover has no visible heading.
• Set modal={true} on PopoverRoot to trap focus within the popover when using interactive content.
• PopoverArrow is marked aria-hidden="true" — purely decorative.

See the Radix Popover accessibility docs for full inherited behaviour.

Choosing the Right Component

Use Popover for click-triggered panels with interactive content. Reach for a different primitive when:

Related

• Tooltip
• Dialog
• Dropdown Menu