Skip to content

Popover

Base UI

A small panel anchored to a button, for quick detail or settings.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/popover.json

Also installs @base-ui/react.

Usage

import { Popover, PopoverContent, PopoverTrigger } from "@/components/spotcheck/popover"
import { Button } from "@/components/spotcheck/button"

<Popover>
  <PopoverTrigger render={<Button />}>Details</PopoverTrigger>
  <PopoverContent>…</PopoverContent>
</Popover>

Props

  • side"top" | "right" | "bottom" | "left"Default bottom
  • align"center" | "start" | "end"Default start
  • classNamestringDefault —

Keyboard

EnterOpen the popover
EscClose and return focus

Reduced motion

The panel appears without animation.