Skip to main content
The Popover component displays floating content anchored to a trigger element.

​
Installation

import {
  PopoverRoot,
  PopoverTrigger,
  PopoverPortal,
  PopoverPositioner,
  PopoverPopup,
  PopoverArrow,
  PopoverTitle,
  PopoverDescription,
  PopoverClose,
} from "@craftdotui/baseui/components/popover";

​
Usage

<PopoverRoot>
  <PopoverTrigger>
    <Button>Open Popover</Button>
  </PopoverTrigger>
  
  <PopoverPortal>
    <PopoverPositioner>
      <PopoverPopup>
        <PopoverArrow />
        <PopoverTitle>Popover Title</PopoverTitle>
        <PopoverDescription>
          This is a popover description.
        </PopoverDescription>
      </PopoverPopup>
    </PopoverPositioner>
  </PopoverPortal>
</PopoverRoot>

​
Components

​
PopoverRoot

​
open
boolean
Controlled open state.
​
defaultOpen
boolean
Default open state.
​
onOpenChange
function
Callback when state changes.

​
PopoverPositioner

​
side
string
default:"bottom"
Preferred side. Options: top, right, bottom, left
​
align
string
default:"center"
Alignment. Options: start, center, end
​
sideOffset
number
default:"8"
Distance from the trigger.

​
PopoverPopup

The popover content container with border and shadow.

​
PopoverArrow

Optional arrow pointing to the trigger.

​
PopoverTitle

Title for the popover content.

​
PopoverDescription

Description text.

​
PopoverClose

Closes the popover when clicked.

​
Examples

​
With Arrow

<PopoverRoot>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverPortal>
    <PopoverPositioner>
      <PopoverPopup>
        <PopoverArrow />
        <PopoverTitle>Title</PopoverTitle>
        <PopoverDescription>Description</PopoverDescription>
      </PopoverPopup>
    </PopoverPositioner>
  </PopoverPortal>
</PopoverRoot>

​
Different Sides

<PopoverPositioner side="top">...</PopoverPositioner>
<PopoverPositioner side="right">...</PopoverPositioner>
<PopoverPositioner side="bottom">...</PopoverPositioner>
<PopoverPositioner side="left">...</PopoverPositioner>

​
With Close Button

<PopoverPopup>
  <PopoverTitle>Title</PopoverTitle>
  <PopoverDescription>Description</PopoverDescription>
  <PopoverClose>
    <Button size="sm">Close</Button>
  </PopoverClose>
</PopoverPopup>

​
Accessibility

  • Built on @base-ui/react for ARIA support
  • Keyboard navigation (Escape to close)
  • Focus management
  • Proper ARIA attributes
  • Collision detection for positioning

Build docs developers (and LLMs) love

Get started for freeTalk to us