Popover

A floating panel that appears next to a trigger.

Installation

bash
npx shadcn@latest add popover

Import

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

Basic

Simple text popover

Props

Popover

PROPTYPEDEFAULTDESCRIPTION
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Called when open state changes
defaultOpenbooleanfalseInitial open state (uncontrolled)

PopoverContent

PROPTYPEDEFAULTDESCRIPTION
align"start" | "center" | "end""center"Alignment relative to trigger
side"top" | "right" | "bottom" | "left""bottom"Preferred side of the trigger
sideOffsetnumber4Offset from the trigger