Popover

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/popover.tsx. Registry items that depend on it install it automatically.

components/ui/popover.tsx

Usage

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

export function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline">Details</Button>} />
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Context usage</PopoverTitle>
          <PopoverDescription>12.4k of 200k tokens.</PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}

API Reference

The parts wrap Base UI's Popover primitives and accept their props.

PopoverProps

open ?: boolean: Controlled open state.
onOpenChange ?: (open: boolean) => void: Called when the open state changes.

PopoverContent

PopoverContentProps

side : "top" | "right" | "bottom" | "left" = "bottom": Preferred side of the trigger.
align : "start" | "center" | "end" = "center": Alignment against the trigger.
sideOffset : number = 4: Distance from the trigger in pixels.