Popover
A flat popover panel with a thick navy border. Uses Radix Popover under the
hood with tw-animate-css classes — animate-in fade-in-0 zoom-in-95 on
open, plus a side-aware slide-in-from-*.
popover-demo.app
Installation
terminal.sh
npx y2kui@latest add popoverUsage
import {
Popover,
PopoverContent,
PopoverHeader,
PopoverTitle,
PopoverTrigger,
} from "@/components/ui/popover"Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | — | Initial open state (uncontrolled). |
onOpenChange | (open: boolean) => void | — | Fired when open state changes. |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred side relative to the trigger. |
align | 'start' | 'center' | 'end' | 'center' | Alignment along the chosen side. |
sideOffset | number | 6 | Distance between the trigger and the panel. |