Popover

A trigger-positioned floating panel for arbitrary composed content.

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#

...props

Base UI Popover.Root.Props

Owns open state, Escape, outside press, focus handoff, and modal behavior.

Prop	Type	Default	Description
`...props`	Base UI Popover.Root.Props	—	Owns open state, Escape, outside press, focus handoff, and modal behavior.

PopoverTrigger#

...props

Base UI Popover.Trigger.Props

Trigger part. Compose custom controls with Base UI's render prop.

Prop	Type	Default	Description
`...props`	Base UI Popover.Trigger.Props	—	Trigger part. Compose custom controls with Base UI's render prop.

PopoverContent#

...props

Base 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.

Prop	Type	Default	Description
`...props`	Base 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#

container

HTMLElement | RefObject | null

Custom portal container for framed previews or contained overlays.

...props

Base UI Popover.Portal.Props

Portals the popup to the body or a custom container.

Prop	Type	Default	Description
`container`	HTMLElement \| RefObject \| null	—	Custom portal container for framed previews or contained overlays.
`...props`	Base UI Popover.Portal.Props	—	Portals the popup to the body or a custom container.

PopoverPopup#

...props

div props

Static panel shell for docs previews and non-portaled comparison panes.

Prop	Type	Default	Description
`...props`	div props	—	Static panel shell for docs previews and non-portaled comparison panes.

PopoverArrow#

...props

Base UI Popover.Arrow.Props

Optional arrow pointing at the trigger. Compose inside PopoverContent.

Prop	Type	Default	Description
`...props`	Base UI Popover.Arrow.Props	—	Optional arrow pointing at the trigger. Compose inside PopoverContent.

PopoverBackdrop#

...props

Base UI Popover.Backdrop.Props

Modal backdrop shown while a modal popover is open.

Prop	Type	Default	Description
`...props`	Base UI Popover.Backdrop.Props	—	Modal backdrop shown while a modal popover is open.

PopoverViewport#

...props

Base UI Popover.Viewport.Props

Optional transition viewport for one popover whose content changes between multiple triggers.

Prop	Type	Default	Description
`...props`	Base UI Popover.Viewport.Props	—	Optional transition viewport for one popover whose content changes between multiple triggers.

PopoverHeader#

...props

div props

Panel header layout for title, description, and close actions.

Prop	Type	Default	Description
`...props`	div props	—	Panel header layout for title, description, and close actions.

PopoverSeparator#

...props

div props

Optional horizontal separator. Compose it where the content needs a division.

Prop	Type	Default	Description
`...props`	div props	—	Optional horizontal separator. Compose it where the content needs a division.

Prop	Type	Default	Description
`...props`	Base UI Popover.Title.Props	—	Accessible panel heading.

PopoverDescription#

...props

Base UI Popover.Description.Props

Accessible supporting copy for the panel.

Prop	Type	Default	Description
`...props`	Base UI Popover.Description.Props	—	Accessible supporting copy for the panel.

PopoverClose#

...props

Base UI Popover.Close.Props

Closes the popover. Compose your own visual affordance with render/className.