Popover

Displays rich content in a portal, triggered by a button.

Open popover

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
Open popover
</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Installation

pnpm dlx cubix@latest add popover --base aria

Usage

Import

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/cubix/popover"

Example

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
Open popover
</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Dimensions</PopoverTitle>
      <PopoverDescription>
        Set the dimensions for the layer.
      </PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Examples

Sides

Use side to place the popover relative to the trigger.

<div className="flex flex-wrap items-center gap-4">
  {(["top", "right", "bottom", "left"] as const).map((side) => (
    <Popover key={side}>
      <PopoverTrigger render={<Button variant="outline" />}>
{side}
</PopoverTrigger>
      <PopoverContent side={side} className="w-40">
        Popover on the {side}
      </PopoverContent>
    </Popover>
  ))}
</div>

Align

Use align to shift the panel along the opposite axis.

<div className="flex flex-wrap items-center gap-4">
  {(["start", "center", "end"] as const).map((align) => (
    <Popover key={align}>
      <PopoverTrigger render={<Button variant="outline" />}>
{align}
</PopoverTrigger>
      <PopoverContent align={align}>
        Aligned to {align}
      </PopoverContent>
    </Popover>
  ))}
</div>

With form

Popovers can hold interactive content such as inputs and actions.

Open form

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
Open form
</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Share</PopoverTitle>
      <PopoverDescription>
        Anyone with the link can view this document.
      </PopoverDescription>
    </PopoverHeader>
    <div className="mt-3 grid gap-3">
      <Input defaultValue="https://cubix.design" readOnly />
      <Button className="w-full">Copy link</Button>
    </div>
  </PopoverContent>
</Popover>

API Reference

Note: The popover is not modal. Escape and clicking outside close it, and focus returns to the trigger. Use Dialog when you need a focus-trapped overlay.

Popover

The container that wraps the trigger and content and manages open state.

Prop	Type	Default	Description
open	boolean	-	Controlled open state. Omit to use uncontrolled mode.
defaultOpen	boolean	false	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
children	React.ReactNode	-	The trigger and content elements.

PopoverTrigger

The element that opens the popover. Use render to merge onto a Button.

Prop	Type	Default	Description
render	React.ReactElement	-	Render the trigger as another element (e.g. a Button).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

PopoverContent

The panel rendered in a portal next to the trigger.

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side of the trigger to render the popover on.
align	"start" \| "center" \| "end"	"center"	Alignment along the opposite axis of `side`.
sideOffset	number	8	Distance in pixels between the trigger and the popover.
alignOffset	number	0	Offset in pixels along the alignment axis.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'div'>	-	All native div attributes are forwarded to the popover panel.

PopoverHeader / PopoverTitle / PopoverDescription

Optional layout and text helpers for the popover panel.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).