overlay

Popover

A small floating panel anchored to a button, for extra controls or details. Does not block the page.

npx blankui add popover

Raw markdown for agents Registry JSON

When to use

A few extra controls next to a button, like share settings or a date picker.
Details that appear on click and can be dismissed by clicking away.

Use something else when

Only a short text hint. Use tooltip.
A task that needs the user's full attention. Use dialog.
Picking one option from a list. Use select.

Import

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

Example

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Share</Button>
  </PopoverTrigger>
  <PopoverContent align="end">
    <Stack gap={3}>
      <Field label="Link">
        <Input readOnly value={url} />
      </Field>
      <Button size="sm" onClick={copy}>
        Copy link
      </Button>
    </Stack>
  </PopoverContent>
</Popover>

Mistakes to avoid

Avoid	Instead
An absolutely positioned div toggled with useState	<Popover> handles position, focus and closing
Interactive content in a Tooltip	<Popover>

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/popover.json