Anchors interactive content to a trigger without blocking the page.
<Popover>
<Popover.Trigger render={<Button variant="soft" />}>Open Popover</Popover.Trigger>
<Popover.Content>
<Popover.Close />
<Popover.Title>Popover Title</Popover.Title>
<Popover.Description>pnpm add @usefragments/uiThe npm package stays managed by your package manager. Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Import Popover once, then compose its parts with dot notation.
Popover.TriggerPopover.ContentPopover.ClosePopover.TitlePopover.DescriptionPopover.BodyPopover.FooterTitle, body, and a close control.
<Popover>
<Popover.Trigger render={<Button variant="soft" />}>Open Popover</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>Enough room to edit a value in place.
<Popover>
<Popover.Trigger render={<Button variant="soft" />}>Edit Name</Popover.Trigger>
<Popover.Content size="sm">
<Popover.Close />
<Popover.Title>Edit Name</Popover.Title>
<Popover.Body>The arrow ties the panel back to its trigger.
<Popover>
<Popover.Trigger render={<Button variant="soft" />}>Info</Popover.Trigger>
<Popover.Content arrow>
<Popover.Title>Quick Tip</Popover.Title>
<Popover.Description>
This popover has an arrow pointing to its trigger element.Flips to the opposite side when space runs out.
<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>
<Popover>
<Popover.Trigger render={<Button variant="soft" />}>Top</Popover.Trigger>
<Popover.Content side="top" size="sm">
<Popover.Description>Popover on top</Popover.Description>
</Popover.Content>render lets a link open it.
<Popover>
<Popover.Trigger render={<a href="#popover-help" />}>Open help</Popover.Trigger>
<Popover.Content size="sm">
<Popover.Description>The trigger renders as a link through render.</Popover.Description>
</Popover.Content>
</Popover>Prop | Type | Default | Description |
|---|---|---|---|
Body.childrenRequired | React.ReactNode | Not set | — |
childrenRequired | React.ReactNode | Not set | Popover trigger and content |
Content.align | "center" | "start" | "end" | undefinedcenterstartend | Not set | — |
Content.anchor | Element | null | undefined | Not set | Position against an element other than the trigger (a node in a host page). Defaults to the trigger. |
Content.arrow | boolean | undefined | Not set | Draw a fill-only pointer toward the trigger. |
Content.childrenRequired | React.ReactNode | Not set | — |
Content.container | HTMLElement | ShadowRoot | null | undefined | Not set | Render the portal into a specific container instead of `document.body` (a shadow root whose styles would not otherwise reach body-portaled content). |
Content.positionMethod | "absolute" | "fixed" | undefinedabsolutefixed | Not set | CSS `position` for the floating content. |
Content.side | "top" | "bottom" | "left" | "right" | undefinedtopbottomleftright | Not set | — |
Content.size | PopoverSize | undefinedsmmd | Not set | Width cap and inset. |
defaultOpen | boolean | undefined | false | Default open state (uncontrolled) |
Description.childrenRequired | React.ReactNode | Not set | — |
Footer.childrenRequired | React.ReactNode | Not set | — |
modal | boolean | undefined | false | Whether to block page interaction |
onOpenChange | ((open: boolean) => void) | undefined | Not set | Called when open state changes |
open | boolean | undefined | Not set | Controlled open state |
Title.childrenRequired | React.ReactNode | Not set | — |