## Overview [#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 [#usage] ```tsx import { Popover, PopoverTrigger, PopoverContent } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx }>Open Popover

Popover content goes here

 ``` The `PopoverTrigger` uses Base UI's `render` prop pattern. This allows you to compose the trigger with any component: ```tsx }> Open Popover ``` When using `render={}`, the children of `PopoverTrigger` become the children of the rendered component. ## Examples [#examples] ### Basic [#basic] Click the trigger to open a popover with interactive content. ```tsx import { Popover, PopoverContent, PopoverTrigger, Button, Badge, } from "@tilt-legal/cubitt-components/primitives"; }> Show Popover

Premium Plan

Advanced analytics provides deeper insights into your data, including trends, predictions, and detailed user behavior.

Note! Plan upgrade is required.

``` ### Positions [#positions] Popover positioned on different sides of the trigger. ```tsx 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";
}> Left

Left Position

This popover appears on the left side of the trigger button.

}> Top

Top Position

This popover appears above the trigger button.

}> Right

Right Position

This popover appears on the right side of the trigger button.

}> Bottom

Bottom Position

This popover appears below the trigger button.

``` ### Alignment [#alignment] Different alignment options relative to the trigger. ```tsx import { Popover } from "@tilt-legal/cubitt-components/primitives";
}> Align Start

Start Alignment

This popover is aligned to the start of the trigger.

}> Align Center

Center Alignment

This popover is centered relative to the trigger.

}> Align End

End Alignment

This popover is aligned to the end of the trigger.

``` ## API Reference [#api-reference] ### Popover [#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 [#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 [#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 [#popoveranchor] An optional anchor element for positioning the popover. | Prop | Type | Description | | ----------- | -------- | -------------------------------------- | | `className` | `string` | Additional CSS classes for the anchor. |