Floating UI Plus
Floating UI Plus adds interaction, focus, collection, search, and native top-layer behavior to Floating UI positioning primitives. Choose the adapter that matches your renderer and keep the same behavior contract across them.
Install one adapter
Section titled “Install one adapter”Install the package that matches the renderer you use. The Web Components and
Vue adapters install @floating-ui-plus/web as a transitive dependency, so you
do not need to install the Web package separately when using either adapter.
- Install Web Components: Custom Elements with no framework runtime.
- Install Vue: Vue 3 components and composables.
- Install the Web core: framework-neutral controllers and render contracts.
Start here
Section titled “Start here”- Getting started: choose an adapter and wire your first surface.
- Components: special lifecycle, surface, query, and presence building blocks.
- Usage recipes: complete adapter examples for surfaces, portals, collections, and search.
- Demo walkthrough: every interactive example, route, and middleware comparison.
- Popover and dialog: use native Popover,
<dialog>, templates, and portals deliberately. - Entry and exit animation: animate native Popover and dialog surfaces with CSS discrete transitions.
- Combobox demos: compare fuzzy and server search with editable input behavior.
- Dismiss and closing: distinguish
close()fromdismiss()and guard close requests.
Choose an adapter
Section titled “Choose an adapter”- Web: framework-neutral controllers and render contracts.
- Web Components and Vue: adapter-specific markup with a shared API contract.
The live demo shows the same patterns running in the browser, including the combobox and modal examples.