Popover

Import

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

Usage Guidelines

When to use

• For small interactive forms or configuration panels anchored to a button (e.g., dimension settings, color pickers, date selectors).
• When the content is too complex for a Tooltip but doesn't warrant a full Dialog.
• When the user needs to interact with the floating content (click buttons, type in fields).

When NOT to use

• For short, non-interactive text hints — use Tooltip instead.
• For rich preview cards on hover — use HoverCard instead.
• For large amounts of content or multi-step flows — use Dialog or Sheet.

Preview

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    Popover content goes here.
  </PopoverContent>
</Popover>

Source