FORMA Docs

Popover

A small anchored surface for contextual information.

import { Popover, PopoverContent, PopoverTrigger } from "@/forma/arc/popover/popover";
Base

In FORMA

  • Liegt in kit/arc/popover und ist über @/forma/arc/popover/popover erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
  • Das Kit nutzt ihn als Popover aus @/forma/ui/popover — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

  • Click-opened panels with interactive content, like share settings or a small filter form.
  • Non-modal helpers that should stay open while people interact with the rest of the page.
  • Custom pickers built from your own controls anchored to a button.

When not to use

  • Use tooltip for short hover labels.
  • Use hover-card for read-only previews that open on hover.
  • Use dialog when the choice must block the page, and dropdown-menu for a list of commands.

Usage

import { Popover, PopoverContent, PopoverTrigger } from "@/forma/arc/popover/popover";
import { Button } from "@/forma/arc/button/button";

export function ShareMenu() {
  return (
    <Popover>
      <PopoverTrigger asChild><Button variant="secondary">Share</Button></PopoverTrigger>
      <PopoverContent>
        <p>Anyone with the link can view.</p>
      </PopoverContent>
    </Popover>
  );
}

API reference

Popover

Radix Popover.Root. Holds open state.

PropTypeDefaultDescription
openboolean–Controlled open state.
defaultOpenbooleanfalseInitial open state when uncontrolled.
onOpenChange(open: boolean) => void–Called when the popover opens or closes.
modalbooleanfalseTraps focus and blocks outside interaction when true.

PopoverTrigger

Radix trigger that opts out of press-scale so the panel does not shift on open.

PropTypeDefaultDescription
...propsComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>–Radix trigger props, including asChild and ref.

PopoverContent

Portaled floating panel anchored to the trigger.

PropTypeDefaultDescription
align"start" | "center" | "end""start"Alignment against the trigger.
sideOffsetnumber6Gap from the trigger in px.
collisionPaddingnumber10Minimum distance from viewport edges in px.
...propsComponentPropsWithoutRef<typeof PopoverPrimitive.Content>–Radix content props such as side, className, and onOpenAutoFocus.

PopoverClose

Radix Popover.Close for an explicit dismiss button.

PropTypeDefaultDescription
...propsComponentPropsWithoutRef<typeof PopoverPrimitive.Close>–Radix close props, including asChild.

Keyboard interactions

KeysAction
Enter / SpaceOpens the popover from the trigger.
EscapeCloses the popover and returns focus to the trigger.

Accessibility

  • Radix sets aria-expanded, aria-controls, and aria-haspopup="dialog" on the trigger.
  • Focus moves into the content on open and back to the trigger on close.
  • Content is non-modal by default; give it a heading or aria-label when it holds controls.

Motion

  • CSS transitions: the panel fades and settles from 5px toward its trigger at 0.97 scale on a spring; it leaves in 140ms.
  • Transitions instead of keyframes, so a reopen mid-close reverses from where the panel is.
  • Reduced motion drops the transform and keeps a short opacity fade.

Responsive behavior

  • The panel is at least 12rem and at most min(22rem, 100vw minus 20px), so it never overflows a phone screen.
  • Radix collision handling keeps it 10px from viewport edges by default and flips sides when needed.

Performance

  • Pure CSS transitions with no motion runtime; content mounts in a portal only while open.

Notes for AI

  • Use for click-opened, non-modal panels with interactive content. Use tooltip for short hover labels, hover-card for read-only previews, dialog when the choice must block.
  • Compose Popover > PopoverTrigger asChild + PopoverContent. Pass side for placement.

Also in overlays

  • Drawer: A temporary side surface for focused work.
  • Bottom sheet: A sheet that rests at a peek or full height and follows your finger.
  • Share access: A share panel: invite people as validated email chips with suggestions, change roles from a compact menu, remove with undo, switch link access and copy the link, with every change landing in place.

Guidance for AI tools

Popover: A small anchored surface for contextual information. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückDialogWeiterTooltip

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.