V2 componentsUpdated Oct 14, 2026
Popover
Non-modal content anchored to a trigger. Content wraps the portal, positioner, and popup and exposes the positioning props you actually change.
Source: packages/ui/src/components/popover
import { Popover } from '@highlight/ui'Change the props; the preview and the snippet update together.
Props
Side
Align
8
Show arrow
Show backdrop
Close row
<Popover> <Popover.Trigger render={<Button>Share</Button>} /> <Popover.Content> <Popover.Title>Share this summary</Popover.Title> <Popover.Description>Anyone with the link can read it.</Popover.Description> </Popover.Content></Popover>Pass a Button through render so the trigger is a single element.
import { Button, Popover } from '@highlight/ui' export default function PopoverBasic() { return ( <Popover> <Popover.Trigger render={<Button>Share</Button>} /> <Popover.Content className="w-64"> <Popover.Title>Share this summary</Popover.Title> <Popover.Description>Anyone with the link can read it. Editing stays with attendees.</Popover.Description> </Popover.Content> </Popover> )}import { Button, Popover } from '@highlight/ui' const SIDES = ['top', 'right', 'bottom', 'left'] as const export default function PopoverPositions() { return ( <div className="flex flex-wrap items-center justify-center gap-3"> {SIDES.map((side) => ( <Popover key={side}> <Popover.Trigger render={ <Button size="sm" variant="outline" className="capitalize"> {side} </Button> } /> <Popover.Content side={side} showArrow> <p className="text-sm capitalize">{side}</p> </Popover.Content> </Popover> ))} </div> )}import { Button, Popover } from '@highlight/ui' export default function PopoverBackdrop() { return ( <Popover> <Popover.Trigger render={<Button variant="primary">With backdrop</Button>} /> <Popover.Content showBackdrop className="w-60"> <p className="text-sm">The page dims and the popover reads as modal.</p> <div className="-mx-4 -mb-4 mt-3"> <Popover.Close className="rounded-b-xl">Close</Popover.Close> </div> </Popover.Content> </Popover> )}The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.
Popover- Base UI Popover.Root. Owns open state; renders nothing itself.
Popover.Trigger- Unstyled trigger; use render to supply a Button.
Popover.Content- side, sideOffset, align, alignOffset, anchor, showArrow, showBackdrop, initialFocus.
Popover.Title / Description- Accessible name and body copy.
Popover.Close- Full-width close row for the bottom of a popup.
Popover.Portal / Positioner / Popup / Arrow / Backdrop- Low-level parts.