Popover

Preview

Installation

npx shadcn@latest add @cubby-ui/popover

Usage

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

<Popover>
  <PopoverTrigger />
  <PopoverContent />
</Popover>

Examples

Advanced Positioning

Control popover placement with advanced positioning options.

Hover Trigger

Open popover on hover instead of click.

With Backdrop

Add backdrop overlay when popover is open.

With Header and Footer

Include structured header and footer sections.

Without Arrow

Hide the arrow pointer for a cleaner look.

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.

Custom Props

PopoverContent

Modified Defaults

Our implementation changes the following Base UI prop defaults:

• PopoverContent: side defaults to 'bottom' (Base UI defaults to 'top')
• PopoverContent: align defaults to 'center' (Base UI defaults to 'center' but we make it explicit)
• PopoverContent: sideOffset defaults to 8 (Base UI defaults to 0)
• PopoverContent: alignOffset defaults to 0
• PopoverContent: collisionPadding defaults to 10
• PopoverContent: sticky defaults to false
• PopoverContent: positionMethod defaults to 'absolute'
• PopoverContent: arrow defaults to true