Popover

Fades and scales in from the trigger (150ms) and fades out in 100ms; under reduced motion it appears at once. Escape or a click outside closes it, and focus returns to the trigger.

Installation

$npx shadcn@latest add @reziui/popover

The exit animation uses tw-animate-css, which shadcn init already imports into Tailwind v4 projects.

Usage

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

export function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="secondary">Share</Button>
      </PopoverTrigger>
      <PopoverContent>…</PopoverContent>
    </Popover>
  );
}

Use a popover for content the user interacts with — a form, a link to copy, settings. For a short label on hover, use a Tooltip; for a list of actions, use a Dropdown Menu.

API reference