Popover

A trigger-positioned floating panel for arbitrary composed content.

GitHub

Preview#

Preview keeps the surface to one trigger and its supporting guidance panel.

Anatomy#

import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverHeader,
  PopoverSeparator,
  PopoverTitle,
  PopoverTrigger,
} from "raft-ui";

<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle />
      <PopoverClose />
    </PopoverHeader>
    <PopoverSeparator />
  </PopoverContent>
</Popover>

Usage#

Details#

API#WIP

Popover#

PropTypeDefaultDescription
...propsBase UI Popover.Root.Props—Owns open state, Escape, outside press, focus handoff, and modal behavior.

PopoverTrigger#

PropTypeDefaultDescription
...propsBase UI Popover.Trigger.Props—Trigger part. Compose custom controls with Base UI's render prop.

PopoverContent#

PropTypeDefaultDescription
...propsBase UI Popup + Positioner props—Portaled floating panel. Defaults to side=bottom, align=start, sideOffset=4, disableAnchorTracking=true, and forwards anchor/collision/sticky/inline-side positioning props.

PopoverPortal#

PropTypeDefaultDescription
containerHTMLElement | RefObject | null—Custom portal container for framed previews or contained overlays.
...propsBase UI Popover.Portal.Props—Portals the popup to the body or a custom container.

PopoverPopup#

PropTypeDefaultDescription
...propsdiv props—Static panel shell for docs previews and non-portaled comparison panes.

PopoverArrow#

PropTypeDefaultDescription
...propsBase UI Popover.Arrow.Props—Optional arrow pointing at the trigger. Compose inside PopoverContent.

PopoverBackdrop#

PropTypeDefaultDescription
...propsBase UI Popover.Backdrop.Props—Modal backdrop shown while a modal popover is open.

PopoverViewport#

PropTypeDefaultDescription
...propsBase UI Popover.Viewport.Props—Optional transition viewport for one popover whose content changes between multiple triggers.

PopoverHeader#

PropTypeDefaultDescription
...propsdiv props—Panel header layout for title, description, and close actions.

PopoverSeparator#

PropTypeDefaultDescription
...propsdiv props—Optional horizontal separator. Compose it where the content needs a division.

PopoverTitle#

PropTypeDefaultDescription
...propsBase UI Popover.Title.Props—Accessible panel heading.

PopoverDescription#

PropTypeDefaultDescription
...propsBase UI Popover.Description.Props—Accessible supporting copy for the panel.

PopoverClose#

PropTypeDefaultDescription
...propsBase UI Popover.Close.Props—Closes the popover. Compose your own visual affordance with render/className.