Web

@floating-ui-plus/web owns controller state and interaction plugins while your renderer owns elements, markup, ARIA names, styles, and presence.

import { createFloating, click, dismiss } from "@floating-ui-plus/web";

const floating = createFloating(() => ({
  open,
  onBeforeClose: (_event, reason) => canClose(reason),
  onOpenChange: setOpen,
})).pipe(click(), dismiss());

Use createFloatingTopLayer() for a native Popover or <dialog> without moving the element. Use createPortalBridge() only when a different DOM target is required. Use createFloatingPresenceStack() and bindPresenceStackPause() for bounded, pausable transient records such as toasts; adapters own the host box, while application CSS sizes --floating-presence-hit-span to the current stack.

See the usage recipes for controller and interaction composition examples, and the presence stack guide for the shared record contract.