Popover

Base UICopy Anchor Link

Popover opens a floating panel beside or below a trigger without blocking the rest of the page. Compose Popover.Trigger and Popover.Sheet as children of Popover. The trigger accepts any control through render; the sheet carries the accessible name through required title (plus optional description) on the styled variant.

Content portals out of the DOM flow, picks a side from available space, and dismisses on outside click or Escape. Same overlay family as Menu, but sized for richer panels rather than command rows. Use styled Popover.Sheet when ViraUI chrome is enough; pass unstyled when you own the surface and still need Popover.Title / Popover.Description for the dialog name.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Popover } from '@viraui/react';

<Popover>
  <Popover.Trigger />
  <Popover.Sheet>
    <Popover.Close />
  </Popover.Sheet>
</Popover>

Unstyled sheets own chrome and compose Popover.Title / Popover.Description for the accessible name. Popover.createHandle() stays out of the tree.

When to useCopy Anchor Link

• Options, notifications, or short forms anchored to a control without blocking the page
• Panels that need a title, description, body stack, and an explicit dismiss action
• Hover-open or focus-trapped interactive sheets (openOnHover, modal="trap-focus")

When not to useCopy Anchor Link

• A list of commands or exclusive picks from a trigger → Menu
• A brief read-only hint with no interaction → Tooltip
• A modal task that should block the page → Dialog

RelatedCopy Anchor Link

• Menu — command lists with roving focus and typeahead
• Tooltip — short hover/focus hints
• Dialog — edge sheets that interrupt the page

Common examplesCopy Anchor Link

Titled sheetCopy Anchor Link

A titled sheet with trigger, body stack, and Popover.Close is the default non-modal panel. Keep body copy short; put dense command lists in Menu instead.

NotificationsCopy Anchor Link

Open a short status panel from an icon-only IconButton. Match the accessible name on the trigger to what the sheet is about.

Focus trapCopy Anchor Link

Interactive panels can set modal="trap-focus" so tab cycles stay inside the sheet while it is open. Use this when the sheet includes a text field or other controls that should not leak focus to the page.

Shared handleCopy Anchor Link

Detached or multi-trigger layouts share one sheet through Popover.createHandle(); payload render props morph content when the active trigger changes. Here each team row is the trigger — hover or click the whole card. Do not wrap Menu in Popover.

Ask your agentCopy Anchor Link

Add an Options popover from a secondary button — title Options, short description, body copy, and a Done dismiss action.