Popover
An interactive floating panel anchored to a trigger element, used for actions, forms, and controls that require user input.
Overview
The Popover component renders an interactive floating panel that opens when the user clicks a trigger. It's designed for content that requires deliberate interaction — filters, configuration, confirmations, or any workflow where the user needs to take action before dismissing.
Usage
import { Popover, PopoverTrigger, PopoverContent } from "@tilt-legal/cubitt-components/primitives";<Popover>
<PopoverTrigger render={<Button />}>Open Popover</PopoverTrigger>
<PopoverContent>
<p>Popover content goes here</p>
</PopoverContent>
</Popover>The PopoverTrigger uses Base UI's render prop pattern. This allows you to compose the trigger with any component:
<PopoverTrigger render={<Button variant="outline" />}>
Open Popover
</PopoverTrigger>When using render={<Component />}, the children of PopoverTrigger become the children of the rendered component.
Examples
Basic
Click the trigger to open a popover with interactive content.
import {
Popover,
PopoverContent,
PopoverTrigger,
Button,
Badge,
} from "@tilt-legal/cubitt-components/primitives";
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
Show Popover
</PopoverTrigger>
<PopoverContent className="max-w-[300px] text-sm space-y-2">
<p className="font-medium">Premium Plan</p>
<p className="text-muted-foreground">
Advanced analytics provides deeper insights into your data, including
trends, predictions, and detailed user behavior.
</p>
<p className="flex items-center space-x-1">
<Badge variant="destructive" size="sm">
Note!
</Badge>
<span className="text-xs text-muted-foreground">
Plan upgrade is required.
</span>
</p>
</PopoverContent>
</Popover>Positions
Popover positioned on different sides of the trigger.
import {
Popover,
PopoverContent,
PopoverTrigger,
Button,
} from "@tilt-legal/cubitt-components/primitives";
import { PopoverContent, PopoverTrigger, Button } from "@tilt-legal/cubitt-components/primitives";
import {
ArrowLeft,
ArrowUp,
ArrowRight,
ArrowDown } from "@tilt-legal/cubitt-icons/ui/outline";
<div className="flex items-center justify-center gap-6">
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<ArrowLeft />
Left
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="left">
<p className="font-medium">Left Position</p>
<p className="text-muted-foreground">
This popover appears on the left side of the trigger button.
</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<ArrowUp />
Top
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="top">
<p className="font-medium">Top Position</p>
<p className="text-muted-foreground">
This popover appears above the trigger button.
</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<ArrowRight />
Right
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="right">
<p className="font-medium">Right Position</p>
<p className="text-muted-foreground">
This popover appears on the right side of the trigger button.
</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
<ArrowDown />
Bottom
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" side="bottom">
<p className="font-medium">Bottom Position</p>
<p className="text-muted-foreground">
This popover appears below the trigger button.
</p>
</PopoverContent>
</Popover>
</div>Alignment
Different alignment options relative to the trigger.
import { Popover } from "@tilt-legal/cubitt-components/primitives";
<div className="flex items-center justify-center gap-6">
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
Align Start
</PopoverTrigger>
<PopoverContent
className="max-w-[250px] text-sm space-y-2"
align="start"
>
<p className="font-medium">Start Alignment</p>
<p className="text-muted-foreground">
This popover is aligned to the start of the trigger.
</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
Align Center
</PopoverTrigger>
<PopoverContent
className="max-w-[250px] text-sm space-y-2"
align="center"
>
<p className="font-medium">Center Alignment</p>
<p className="text-muted-foreground">
This popover is centered relative to the trigger.
</p>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger render={<Button variant="outline" />}>
Align End
</PopoverTrigger>
<PopoverContent className="max-w-[250px] text-sm space-y-2" align="end">
<p className="font-medium">End Alignment</p>
<p className="text-muted-foreground">
This popover is aligned to the end of the trigger.
</p>
</PopoverContent>
</Popover>
</div>API Reference
Popover
The root component that manages the popover state.
| Prop | Type | Description |
|---|---|---|
open | boolean | Whether the popover is currently open (controlled). |
defaultOpen | boolean | Whether the popover is initially open (uncontrolled). Defaults to false. |
onOpenChange | (open: boolean, eventDetails) => void | Callback fired when the open state changes. |
modal | boolean | Whether the popover is modal. Defaults to false. |
disabled | boolean | Whether the popover is disabled. Defaults to false. |
PopoverTrigger
The element that toggles the popover on click.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes for the trigger. |
render | ReactElement | (props) => ReactElement | Allows composing the trigger with another component. Receives props to spread. |
disabled | boolean | Whether the trigger is disabled. Defaults to false. |
PopoverContent
The container for the popover content, positioned relative to the trigger.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes for the content. |
align | "start" | "center" | "end" | Alignment relative to the trigger. Defaults to "center". |
side | "top" | "right" | "bottom" | "left" | Which side of the trigger to position. Defaults to "bottom". |
sideOffset | number | Distance in pixels from the trigger. Defaults to 8. |
alignOffset | number | Offset in pixels along the alignment axis. Defaults to 0. |
PopoverAnchor
An optional anchor element for positioning the popover.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes for the anchor. |