Popover

StableBase UI

Live preview

Installation

pnpm dlx shadcn@latest add @sc1m/popover

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

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

Composition

Every part is a separate export. Popover owns state; the rest are presentational and must appear in this order.

Popover├── PopoverTrigger└── PopoverContent    ├── PopoverTitle    └── PopoverDescription

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>
    Open popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverTitle className="text-sm font-semibold">
      Base UI Popover
    </PopoverTitle>
    <PopoverDescription className="mt-1 text-sm text-fg-muted">
      Portalled into the body, escaping the isolated app root.
    </PopoverDescription>
  </PopoverContent>
</Popover>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

PropTypeDefaultDescription

defaultOpenbooleanfalseWhether the popover is initially open.

openboolean—Whether the popover is currently open.

onOpenChange((open: boolean, eventDetails: PopoverRoot.ChangeEventDetails) => void)—Event handler called when the popover is opened or closed.

onOpenChangeComplete((open: boolean) => void)—Event handler called after any animations complete when the popover is opened or closed.

actionsRefReact.RefObject<PopoverRoot.Actions | null>—A ref to imperative actions.

modalboolean | 'trap-focus'falseDetermines if the popover enters a modal state when open.

triggerIdstring | null—ID of the trigger that the popover is associated with.

defaultTriggerIdstring | null—ID of the trigger that the popover is associated with.

handlePopoverHandle<Payload>—A handle to associate the popover with a trigger.

PopoverContent

PropTypeDefaultDescription

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Popover — see its reference for the full keyboard map.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-lgPopoverContent

--fgPopoverContent

--linePopoverContent

--shadow-overlayPopoverContent

--surface-raisedPopoverContent

Source

src/components/ui/popover/popover.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

On this page