Popover | Fragments

Preview

<Popover>
  <Popover.Trigger asChild>
    <Button variant="soft">Open Popover</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Popover.Close />

Installation

npx @usefragments/cli add popover

Writes src/fragments/ui/components/Popover plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Popover is a compound: import the root and reach its parts through dot notation.

Popover.Trigger
Popover.Content
Popover.Close
Popover.Title
Popover.Description
Popover.Body
Popover.Footer

Title, body, and a close control.

<Popover>
  <Popover.Trigger asChild>
    <Button variant="soft">Open Popover</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Popover.Close />
    <Popover.Title>Popover Title</Popover.Title>
    <Popover.Description>
      This is a popover with some content. It can contain text, forms, or other elements.
    </Popover.Description>
  </Popover.Content>
</Popover>

Examples

With Form

Enough room to edit a value in place.

<Popover>
  <Popover.Trigger asChild>
    <Button variant="soft">Edit Name</Button>
  </Popover.Trigger>
  <Popover.Content size="sm">
    <Popover.Close />

With Arrow

The arrow ties the panel back to its trigger.

<Popover>
  <Popover.Trigger asChild>
    <Button variant="soft">Info</Button>
  </Popover.Trigger>
  <Popover.Content arrow>
    <Popover.Title>Quick Tip</Popover.Title>

Positions

Flips to the opposite side when space runs out.

<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>
  <Popover>
    <Popover.Trigger asChild>
      <Button variant="soft">Top</Button>
    </Popover.Trigger>
    <Popover.Content side="top" size="sm">

Link Trigger

asChild lets a link open it.

<Popover>
  <Popover.Trigger asChild>
    <a href="#popover-help">Open help</a>
  </Popover.Trigger>
  <Popover.Content size="sm">
    <Popover.Description>Popover trigger can be an anchor when using asChild.</Popover.Description>

API

Component props
Prop	Type	Default	Description
`children`Required	`node`	Not set	Popover trigger and content
`open`	`boolean`	Not set	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`onOpenChange`	`function`	Not set	Called when open state changes
`modal`	`boolean`	`false`	Whether to block page interaction

Accessibility

Focus is moved to popover content on open
Closes on Escape key
Focus returns to trigger on close

Standards

Guidance

Use when

Editing a value in place
Previews richer than a line of text
Filter and picker panels
Content that outgrows a tooltip

Avoid when

A short hint (use Tooltip)
A list of actions (use Menu)
Anything that must block the page (use Dialog)
Feedback the user does not act on (use Toast or Alert)

TooltipalternativeUse Tooltip for brief, non-interactive hints
MenualternativeUse Menu for action lists
DialogalternativeUse Dialog for blocking interactions

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.