Popover

Preview

Installation

npx shadcn@latest add @cubby-ui/popover

Usage

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  PopoverTitle,
  PopoverDescription,
} from "@/components/ui/cubby-ui/popover";

<Popover>
  <PopoverTrigger />
  <PopoverContent>
    <PopoverTitle />
    <PopoverDescription />
  </PopoverContent>
</Popover>

Examples

Hover Trigger

Open popover on hover instead of click using the openOnHover prop.

With Backdrop

Add a backdrop overlay when popover is open for a modal-like experience.

Detached Trigger

Use createPopoverHandle() to link a trigger outside the Popover component.

Animated Transitions

Animate the popover's position, size, and content when switching between multiple triggers with different payloads.

Controlled

Control the popover's open state externally using the open and onOpenChange props.

API Reference

The Popover component is built on top of Base UI's Popover. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Popover documentation.

Utilities

createPopoverHandle

A function to create a handle for connecting detached triggers to a popover. Useful when the trigger needs to be placed outside the Popover component.

import { createPopoverHandle } from "@/registry/default/popover/popover";
 
// Without payload typing
const handle = createPopoverHandle();
 
// With payload typing
const handle = createPopoverHandle<{ title: string }>();

Props

PopoverContent

Composed component for common popover layouts. Combines Popover.Portal, Popover.Positioner, Popover.Popup, and Popover.Viewport. Optionally renders Popover.Arrow. Props are forwarded to the Positioner and Popup components.