Popover

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        Open popover
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Dimensions</PopoverTitle>
          <PopoverDescription>
            Set the dimensions for the layer.
          </PopoverDescription>
        </PopoverHeader>
        <div className="grid gap-3">
          <div className="grid grid-cols-3 items-center gap-3">
            <Label htmlFor="popover-width">Width</Label>
            <Input
              id="popover-width"
              defaultValue="100%"
              className="col-span-2"
            />
          </div>
          <div className="grid grid-cols-3 items-center gap-3">
            <Label htmlFor="popover-height">Height</Label>
            <Input
              id="popover-height"
              defaultValue="25px"
              className="col-span-2"
            />
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}

Popover wraps the popover primitive of the chosen base. Popover is the root that holds the open state, PopoverTrigger toggles it, and PopoverContent renders the positioned panel in a portal. Inside the content, PopoverHeader groups a PopoverTitle and PopoverDescription above any other content, such as form fields.

Use a popover for interactive content that relates to its trigger. Use Tooltip for short, non-interactive hints, and Dialog when the task needs the user's full attention.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/popover

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add popover

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

2. Copy the source into components/ui/popover.tsx:

3. Update the import paths to match your project.

Usage

import { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription } 

<

<

<

The popover is uncontrolled by default; use defaultOpen, or the open state with onOpenChange to control it. PopoverContent accepts the positioning props side, sideOffset, align and alignOffset, defaulting to bottom, 4, center and 0.

Examples

Sides

Four popovers that open on the top, right, bottom and left of their triggers.

Simple

A plain text popover opened from a ghost button, without a header.

API Reference

Accessibility

• The panel has the dialog role. PopoverTitle provides its accessible name and PopoverDescription its accessible description.
• The trigger exposes aria-expanded.
• Escape closes the popover and returns focus to the trigger.
• Clicking outside the panel, or clicking the trigger again, closes it.

Notes

• Styling hooks: data-slot values popover, popover-trigger, popover-content, popover-header, popover-title and popover-description.
• The panel is w-72 by default; override it with className.
• The panel animates in from the side it opens on.
• Uses the popover, popover-foreground and muted-foreground tokens.

Popover positions a panel next to its PopoverTrigger. PopoverContent renders in a portal, is placed on any side with an align and offsets, and animates in with a short fade, scale and slide using Reanimated. On iOS the content is wrapped in a FullWindowOverlay from react-native-screens, so it draws above native modals.

Use PopoverHeader, PopoverTitle and PopoverDescription to label the panel. For short hints, use Tooltip instead.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/popover

$ pnpm dlx @esuiss/ui@latest add popover

$ pnpm dlx @esuiss/ui@latest add popover --platform swift