primitives

Popover

Anchor-positioned floating container for arbitrary content — mini forms, info cards, color pickers, anything that's not strictly a menu (DropdownMenu) or a hover-only label (Tooltip).

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/popover.json

Or import from the workspace package:

import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "@8maverik8/design";

Examples

Inline metadata editor

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Edit metadata</Button>
  </PopoverTrigger>
  <PopoverContent>
    <Field>
      <FieldLabel htmlFor="region">Region</FieldLabel>
      <Input id="region" defaultValue="eu-west-1" />
    </Field>
    …
  </PopoverContent>
</Popover>

Guidelines

Use Popover for short side-by-side editing (rename, edit metadata) so the user doesn't lose page context.
Use Popover for a list of actions.That's `<DropdownMenu>` — it has correct keyboard navigation and ARIA semantics for menu items.
Open a Popover from inside another Popover.Nested floating layers cause focus and Esc-handling chaos.