Popover

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

Basic usage of the Popover component.

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/popover.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
 
export function MyComponent() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open</Button>
      </PopoverTrigger>
      <PopoverContent>Place content for the popover here.</PopoverContent>
    </Popover>
  );
}

Examples

Placement

You can use the side prop to position the popover content.

Alignment

Use the align prop to align the popover content.

API Reference

The PopoverContent component extends the radix-ui Popover content props and adds the following:

Prop	Type	Default	Description
`align`	`enum`	`"center"`	The preferred alignment against the anchor (`start`, `center`, `end`).
`side`	`enum`	`"bottom"`	The preferred side of the anchor to render against (`top`, `right`, `bottom`, `left`).
`sideOffset`	`number`	`4`	The distance in pixels from the anchor.

Pagination Progress

On This Page

Installation Usage Examples Placement Alignment API Reference