Popover

Overview

Popover renders interactive floating content anchored to a trigger. Use it for focused controls, lightweight configuration, or short contextual workflows that need deliberate user interaction.

Popover content is surface-aware: it lands at parent +2 and uses the matching floating border and shadow for that surface level.

Usage

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@tilt-legal/cubitt-components/popover";

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>
    Show Popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverTitle>Premium Plan</PopoverTitle>
    <PopoverDescription>
      Advanced analytics provides deeper insights into your data.
    </PopoverDescription>
  </PopoverContent>
</Popover>

Examples

Basic

Click the trigger to open a popover with title, description, and dismiss control.

import { Badge } from "@tilt-legal/cubitt-components/badge";
import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@tilt-legal/cubitt-components/popover";

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>
    Show Popover
  </PopoverTrigger>
  <PopoverContent className="space-y-3">
    <PopoverClose className="absolute end-2 top-2" />
    <div className="space-y-1 pe-8">
      <PopoverTitle>Premium Plan</PopoverTitle>
      <PopoverDescription>
        Advanced analytics provides deeper insights into your data.
      </PopoverDescription>
    </div>
    <div className="flex items-center gap-2">
      <Badge size="sm" variant="destructive">
        Note
      </Badge>
      <span className="text-fg-2 text-xs">Plan upgrade is required.</span>
    </div>
  </PopoverContent>
</Popover>;

Positions

Popover content can be positioned on any side of the trigger.

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@tilt-legal/cubitt-components/popover";
import { ArrowLeft } from "@tilt-legal/cubitt-icons/ui/outline";

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>
    <ArrowLeft />
    Left
  </PopoverTrigger>
  <PopoverContent className="space-y-1" side="left">
    <PopoverTitle>Left Position</PopoverTitle>
    <PopoverDescription>
      This popover appears on the left side of the trigger.
    </PopoverDescription>
  </PopoverContent>
</Popover>;

Alignment

Popover content can align to the start, center, or end of the trigger.

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from "@tilt-legal/cubitt-components/popover";

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>
    Align Start
  </PopoverTrigger>
  <PopoverContent align="start" className="space-y-1">
    <PopoverTitle>Start Alignment</PopoverTitle>
    <PopoverDescription>
      This popover is aligned to the start of the trigger.
    </PopoverDescription>
  </PopoverContent>
</Popover>;

API Reference

Prop	Type	Default	Description
`open`	`boolean`	–	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean, eventDetails) => void`	–	Callback fired when the open state changes.
`modal`	`boolean`	`false`	Whether interaction outside the popover is blocked.
`disabled`	`boolean`	`false`	Whether the popover is disabled.

PopoverTrigger

Prop	Type	Default	Description
`render`	`ReactElement \| (props) => ReactElement`	–	Compose the trigger with another part.
`className`	`string`	–	Additional classes for the trigger.
`disabled`	`boolean`	`false`	Whether the trigger is disabled.

PopoverContent

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Side of the trigger to position against.
`sideOffset`	`number`	`8`	Distance from the trigger.
`alignOffset`	`number`	`0`	Offset along the alignment axis.
`anchor`	`RefObject \| Element \| VirtualElement`	–	Optional custom positioning anchor.
`positionMethod`	`"absolute" \| "fixed"`	–	Positioning strategy passed to Base UI.
`className`	`string`	–	Additional classes for the content surface.
`children`	`ReactNode`	–	Popover content.

PopoverClose

Prop	Type	Default	Description
`render`	`ReactElement \| (props) => ReactElement`	–	Compose the close control with another component.
`className`	`string`	–	Additional classes for the close control.
`children`	`ReactNode`	–	Close content. Defaults to an icon-only frost button.

PopoverTitle

Prop	Type	Default	Description
`className`	`string`	–	Additional classes for the title.
`children`	`ReactNode`	–	Title content.

PopoverDescription

Prop	Type	Default	Description
`className`	`string`	–	Additional classes for the description.
`children`	`ReactNode`	–	Description content.

PopoverAnchor

Prop	Type	Default	Description
`className`	`string`	–	Additional classes for the anchor span.

Popover

On this page