Popover

Installation

$ npx shadcn@latest add https://goodui.dev/r/popover.json

The file lands in components/goodui/popover.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/popover works too.

Usage

import * as React from "react"
import { Calendar, ChevronDown } from "lucide-react"
import { Button } from "@/components/goodui/button"
import { Popover } from "@/components/goodui/popover"

export function DateFilter({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const [draft, setDraft] = React.useState(value)
  return (
    <Popover
      align="start"
      title="Date range"
      onOpenChange={(open) => open && setDraft(value)}
      trigger={
        <Button variant="outline" iconLeft={<Calendar />} iconRight={<ChevronDown />}>
          {value}
        </Button>
      }
      footer={({ close }) => (
        <Button size="sm" onClick={() => { onChange(draft); close() }}>
          Apply
        </Button>
      )}
    >
      <Presets value={draft} onChange={setDraft} />
    </Popover>
  )
}

When to use

Examples

<Popover title="Share booking page" size="sm" align="end" trigger={<Button>Share</Button>}>
  {({ close }) => <ShareTargets onShared={close} />}
</Popover>

<Popover
  modal
  side="start"
  variant="soft"
  tone="warning"
  title="Note for Maya"
  trigger={<Button size="sm" variant="ghost">Note</Button>}
  footer={({ close }) => <Button size="sm" onClick={() => { save(); close() }}>Save note</Button>}
>
  <textarea aria-label="Note" />
</Popover>

<Popover matchTriggerWidth arrow={false} align="start" aria-label="Switch location" trigger={<Button className="w-56">Downtown</Button>}>
  {({ close }) => <LocationList onPick={close} />}
</Popover>

API reference

Accessibility

• •The panel has role="dialog", is named by the title (aria-labelledby) and described by the description; without a title, pass aria-label. modal adds aria-modal="true".
• •The trigger gets aria-haspopup="dialog", aria-expanded and aria-controls.
• •Focus moves in on open (initialFocus, else the first control in the body, else the panel) and returns to the trigger after Esc, the close button or close(). An outside click doesn't pull focus back, so the clicked control keeps it.
• •Outside-click detection follows the React tree, so popovers, selects and menus rendered in portals inside the popover don't close it.
• •The × button is named by labels.close for translation. The arrow is decorative.

Motion

• •scale: from 0.94 in 180 ms. slide: 6px from the trigger in 220 ms. spring: from 0.8 on a spring (stiffness 520, damping 26). fade: opacity only, 150 ms. Every variant leaves in 120 ms.
• •Scale and spring grow from the arrow tip.
• •Reduced motion: a 100 ms fade, no movement. animation="none" opens and closes instantly.

• •Nothing renders until it opens. Position is recomputed on open, scroll, resize and when the panel or trigger changes size, not on every frame.
• •The body scrolls when the space on the chosen side is smaller than the content, instead of the panel leaving the screen.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related