Popover

Popover

<PopoverTrigger>
  <Button>Options</Button>
  <Popover>
    <PopoverContent>Inline panel content here.</PopoverContent>
  </Popover>
</PopoverTrigger>

Install: @helixui/core

import { Popover, PopoverTrigger, PopoverContent } from '@helixui/core'

status: stable · since: 0.1.0

Tags: floating, anchored, transient

Anatomy

[ trigger ]
   ╭───────────╮
   │  content  │  ← anchored
   ╰───▽───────╯

Layout

• display — portal
• width — content
• height — content
• intrinsicSize — anchored to trigger; placement auto
• stackable — false
• fullBleed — false

Visual

A floating panel with shadow.lg and arrow caret, anchored to a trigger. Closes on click-outside, Escape, or programmatically.

Props

Name	Type	Default	Description
placement	'top' | 'bottom' | 'start' | 'end' | …	bottom	Anchor placement. See react-aria docs for full enum.
offset	number	8	Distance from trigger in pixels.
isOpen	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open.
onOpenChange	(open: boolean) => void	—	Open change handler.

Slots

• PopoverTrigger child — the anchor element
• PopoverContent child — the floating content (renders in a portal)

Tokens used

color.bg.surface.default, color.border.default, color.text.primary, radius.md, space.4, font.family.sans, font.size.sm, shadow.md

Accessibility

Notes

• Composed of <DialogTrigger> + <Popover> + <Dialog> from react-aria-components — focus trapping, restoration, dismiss-on-outside, escape, all built in.
• Animation respects prefers-reduced-motion.

Composes with

Component	Relation	Note
Button	trigger	Common opener.
IconButton	trigger	Common opener for icon-only.
Dialog	alternative	Use Dialog for modal/blocking interactions.
Tooltip	alternative	Tooltip for short labels; Popover for richer content.
Menu	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

rich tooltip with actions

“popover anchored to a Help button”

<PopoverTrigger>
  <Button variant="ghost">Help</Button>
  <Popover><PopoverContent>Need help? <a href="/docs">Read the docs.</a></PopoverContent></Popover>
</PopoverTrigger>

Related

• Dialog
• Tooltip
• Menu