Popover

Shows content in a panel anchored to its trigger.

popover-demo.tsx

"use client";import { CalendarBlankIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import {  Popover,  PopoverDescription,  PopoverDialog,  PopoverTitle,  PopoverTrigger,} from "@/components/vip-ui/popover";const details = [  { label: "Room", value: "Studio B, 3rd floor" },  { label: "Host", value: "Maya Chen" },  { label: "Guests", value: "6 accepted, 2 pending" },];export function PopoverDemo() {  return (    <PopoverTrigger>      <Button variant="outline">        <CalendarBlankIcon aria-hidden="true" />        Design review      </Button>      <Popover placement="bottom start" className="w-80">        <PopoverDialog>          <PopoverTitle>Design review</PopoverTitle>          <PopoverDescription>            Thursday, June 18 · 2:00–2:45 PM          </PopoverDescription>          <dl className="mt-4 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-2 border-t border-border/70 pt-4 text-sm">            {details.map((item) => (              <div key={item.label} className="contents">                <dt className="text-muted-foreground">{item.label}</dt>                <dd>{item.value}</dd>              </div>            ))}          </dl>        </PopoverDialog>      </Popover>    </PopoverTrigger>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-popover.json

Composition

PopoverTrigger
Owns the open state.
- Button
- Popover
  - PopoverArrowOptional
  - PopoverDialog
    - PopoverTitle
    - PopoverDescriptionOptional
    - PopoverFooterOptional
      - Button
        Set slot="close" to close the popover.

Placement and arrow

Add start or end to align an edge, such as "bottom start". PopoverArrow follows the side.

popover-placement-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import {  Popover,  PopoverArrow,  PopoverDescription,  PopoverDialog,  PopoverTitle,  PopoverTrigger,} from "@/components/vip-ui/popover";const placements = [  { placement: "top", label: "Top", side: "above", cell: "col-start-2" },  {    placement: "left",    label: "Left",    side: "to the left of",    cell: "col-start-1 row-start-2",  },  {    placement: "right",    label: "Right",    side: "to the right of",    cell: "col-start-3 row-start-2",  },  {    placement: "bottom",    label: "Bottom",    side: "below",    cell: "col-start-2 row-start-3",  },] as const;export function PopoverPlacementDemo() {  return (    <div className="grid grid-cols-[repeat(3,6rem)] justify-center gap-2 py-4">      {placements.map((item) => (        <PopoverTrigger key={item.placement}>          <Button variant="outline" className={item.cell}>            {item.label}          </Button>          <Popover placement={item.placement} className="w-44 sm:w-56">            <PopoverArrow />            <PopoverDialog>              <PopoverTitle>{item.label}</PopoverTitle>              <PopoverDescription>                Opens {item.side} the trigger when there is room.              </PopoverDescription>            </PopoverDialog>          </Popover>        </PopoverTrigger>      ))}    </div>  );}

Form

Call close from the PopoverDialog render function after the form submits. Also install Text area.

popover-form-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import {  Popover,  PopoverDescription,  PopoverDialog,  PopoverFooter,  PopoverTitle,  PopoverTrigger,} from "@/components/vip-ui/popover";import { TextArea } from "@/components/vip-ui/text-area";export function PopoverFormDemo() {  const [feedback, setFeedback] = useState("");  return (    <PopoverTrigger>      <Button variant="outline">Feedback</Button>      <Popover placement="bottom end" className="w-80">        <PopoverDialog>          {({ close }) => (            <form              onSubmit={(event) => {                event.preventDefault();                setFeedback("");                close();              }}            >              <PopoverTitle>Send feedback</PopoverTitle>              <PopoverDescription>                Tell us what would make this page more useful.              </PopoverDescription>              <TextArea                aria-label="Feedback"                name="feedback"                placeholder="I wish this page…"                rows={3}                value={feedback}                onChange={setFeedback}                autoFocus                className="mt-4"              />              <PopoverFooter>                <Button slot="close" variant="ghost" size="sm">                  Cancel                </Button>                <Button type="submit" size="sm" isDisabled={!feedback.trim()}>                  Send                </Button>              </PopoverFooter>            </form>          )}        </PopoverDialog>      </Popover>    </PopoverTrigger>  );}

Hover preview

Use PreviewTrigger from react-aria-components with a plain Popover, so hover does not move focus. Also install Avatar and Link.

Review requested by @mayachen for the pricing page redesign.

popover-preview-demo.tsx

"use client";import { ClockIcon, MapPinIcon } from "@phosphor-icons/react";import { useId } from "react";import { PreviewTrigger } from "react-aria-components";import { Avatar } from "@/components/vip-ui/avatar";import { Button } from "@/components/vip-ui/button";import { Link } from "@/components/vip-ui/link";import { Popover, PopoverArrow } from "@/components/vip-ui/popover";export function PopoverPreviewDemo() {  const nameId = useId();  return (    <p className="max-w-sm text-center text-sm leading-6 text-muted-foreground">      Review requested by{" "}      <PreviewTrigger>        <Link href="#maya-chen">@mayachen</Link>        <Popover          placement="bottom"          aria-labelledby={nameId}          className="w-72 p-4"        >          <PopoverArrow />          <div className="flex items-center gap-3">            <Avatar name="Maya Chen" />            <div className="min-w-0">              <p id={nameId} className="font-semibold leading-5">                Maya Chen              </p>              <p className="text-sm leading-5 text-muted-foreground">                Design lead · @mayachen              </p>            </div>          </div>          <p className="mt-3 text-sm leading-5">            Owns the design system and the pricing page redesign.          </p>          <dl className="mt-3 grid gap-1.5 text-sm text-muted-foreground">            <div className="flex items-center gap-2">              <dt>                <MapPinIcon size={16} aria-hidden="true" />                <span className="sr-only">Location</span>              </dt>              <dd>Lisbon</dd>            </div>            <div className="flex items-center gap-2">              <dt>                <ClockIcon size={16} aria-hidden="true" />                <span className="sr-only">Local time</span>              </dt>              <dd>4:12 PM local time</dd>            </div>          </dl>          <Button variant="outline" size="sm" className="mt-4 w-full">            Message Maya          </Button>        </Popover>      </PreviewTrigger>{" "}      for the pricing page redesign.    </p>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Popover (opens in a new tab).

Popover

className: string | ((values) => string): Set a width here, for example w-72. Without a width, the panel grows with its content, up to the viewport width minus 2rem. Use w-(--trigger-width) to match the trigger.
maxHeight: number: Caps the panel height. The panel always fits the viewport and scrolls when its content is taller. With PopoverArrow, the content scrolls inside the panel padding.
arrowBoundaryOffset: number = 16: The minimum distance from the arrow to the panel edge. It keeps the arrow off the rounded corner.
data-placement: "top" | "bottom" | "left" | "right": Set on the panel. The side of the trigger that the panel opened on. The panel scales from --trigger-anchor-point.
data-trigger: string: Set on the panel. The name of the component that opened it, for example DialogTrigger or PreviewTrigger.

PopoverDialog

children: ReactNode | ({ close }) => ReactNode: Moves focus into the panel and keeps it there. Name it with PopoverTitle or aria-label. Use the function form to close after an action. A Button with slot="close" inside it closes the popover.