Popover

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/popover.json

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

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>

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

Property	Type	Default	Description
`children`	ReactNode	`required`	Content to be rendered inside the Popover. Required for Popover, PopoverTrigger, PopoverContent, and PopoverAnchor.
`align`	"start" \| "center" \| "end" \| "baseline"	`"center"`	Alignment of the PopoverContent relative to the trigger. Used in PopoverContent.
`sideOffset`	number	`4`	Offset distance in pixels between the PopoverContent and its trigger. Used in PopoverContent.
`className`	string	`-`	Additional CSS classes to style PopoverContent. Used in PopoverContent.
`...props`	ComponentProps	`-`	All other native Popover props from @radix-ui/react-popover Root, Trigger, Content, or Anchor.