Popover

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

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/popover.json

Usage

Use popover for contextual content anchored to a trigger. Built on Base UI Popover.

import { Button } from "@/components/button/button";
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/popover/popover";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        Open
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>
            Set the dimensions for the layer.
          </PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}