Command Palette

Search for a command to run...

Popover

shadcn/ui

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

import { Popover, PopoverTrigger, PopoverContent } from "@/registry/optics/popover";import { Button } from "@/registry/optics/button";<Popover>	<PopoverTrigger asChild>		<Button variant="outline">Open Popover</Button>	</PopoverTrigger>	<PopoverContent>		<div className="space-y-2">			<h4 className="font-medium leading-none">Dimensions</h4>			<p className="text-sm text-muted-foreground">				Set the dimensions for the layer.			</p>		</div>	</PopoverContent></Popover>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/popover.json

Props

<Popover />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
modal
boolean (default: true)

<PopoverTrigger />
Name
Type
asChild
boolean
<PopoverContent />
Name
Type
className
string
align
"center" | "start" | "end" (default: "center")
side
"top" | "right" | "bottom" | "left"
sideOffset
number (default: 4)
alignOffset
number
onEscapeKeyDown
(event: KeyboardEvent) => void
onPointerDownOutside
(event: PointerEvent) => void
onInteractOutside
(event: Event) => void
<PopoverAnchor />
Name
Type
className
string
PaginationProgress