Float extra content next to a control

At a glanceCopy Anchor Link

• Who: Developers showing a small panel next to a button without leaving the page.
• What: Anchored panel (trigger + content) that stays while the reader looks, then closes on Escape or outside click.
• Use when: For filters, a short form, or extra context that must stay on screen.
• Avoid when: For a list of actions — use the action menu. For a task that needs full attention — use a dialog.
• See also: Open modal dialogs, Open a menu of actions from a button, Name a control on hover

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.6.4 (via changesets).

ExampleCopy Anchor Link

import { Button, Heading, Popover, PopoverContent, PopoverTrigger, Text } from "@zedtech/zedkit-ui";
<Popover>
  <PopoverTrigger asChild><Button variant="outline">Filters</Button></PopoverTrigger>
  <PopoverContent aria-label="Filters">
    <Heading level={3}>Filters</Heading>
    <Text>Status: open invoices only.</Text>
  </PopoverContent>
</Popover>

Wraps: @radix-ui/react-popover