Skip to content
Wave 2APG pattern (opens in a new tab)

Popover

Interactive content anchored to a button: a filter form, details, a small editor.

  • A short label on hover: use Tooltip.
  • A list of actions: use Dropdown Menu.
  • Blocking decisions: use Dialog.

Install

Terminal
pnpm dlx shadcn@latest add @acme/popover

Or import from the package: import { Popover } from '@acme/react'

Examples

Basic

popover-basic.tsx
import { SlidersHorizontal } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTitle,
  PopoverTrigger,
} from '@/components/ui/popover'

export default function PopoverBasic() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        <SlidersHorizontal aria-hidden="true" />
        Filters
      </PopoverTrigger>
      <PopoverContent className="flex flex-col gap-4">
        <div className="flex flex-col gap-1">
          <PopoverTitle>Filter invoices</PopoverTitle>
          <PopoverDescription>Show invoices within an amount range.</PopoverDescription>
        </div>
        <Field>
          <FieldLabel>Minimum (USD)</FieldLabel>
          <Input type="number" inputMode="decimal" defaultValue={100} />
        </Field>
        <Field>
          <FieldLabel>Maximum (USD)</FieldLabel>
          <Input type="number" inputMode="decimal" defaultValue={5000} />
        </Field>
      </PopoverContent>
    </Popover>
  )
}

Props

Popover props
PropTypeDefaultDescription
PopoverTrigger.renderReactElement—Style the trigger: render={<Button variant="outline" />}.
PopoverTrigger.openOnHoverboolean—Also open on hover (info tips). Click and keyboard still work.
PopoverContent.side / alignstring'bottom' / 'center'Placement relative to the trigger.

Accessibility

Keyboard
KeyAction
Enter / SpaceOpens from the trigger; focus moves inside
TabMoves through the content
EscapeCloses and returns focus to the trigger
Role
dialog (non-modal)
You provide
  • A PopoverTitle, or aria-label on PopoverContent.
Built in
  • Hoverable, dismissible and persistent (WCAG 1.4.13).
WCAG 2.2 criteria
1.4.13, 2.1.1, 2.4.3

Don’t

  • Nest popovers.
  • Use for content people must read before continuing (use Dialog).

Tokens

  • color.popover
  • elevation.2
  • radius.lg
  • z.popover