Smart Anchor Positioning
Anchor a floating element next to another element while making sure it stays in view by avoiding collisions. This lets you position tooltips, popovers, or dropdowns optimally.
Places your floating element relative to another element.
Shifts your floating element to keep it in view.
Changes the placement of your floating element to keep it in view.
Changes the size of your floating element to keep it in view.
Dynamically positions an arrow element that is center-aware.
Interactions For React
Build your own floating UI components with React. From simple tooltips to select menus, you have full control while ensuring fully accessible UI experiences.
Floating elements that display information related to an anchor element on hover or focus.
Floating elements that display an anchored interactive dialog on click.
Floating elements that display a list of options to choose from on click.
Floating elements that combine an input and a list of searchable options to choose from.
Floating elements that display a list of buttons that perform an action.
Floating windows overlaid on the UI, rendering content underneath them inert.
Tree-shakeable & Platform-agnostic
In addition to official bindings for the web, React DOM, React Native, and Vue, Floating UI also supports
<canvas>, and each module is fully tree-shakeable by your bundler:
DOM platform+2.5 kB
Support Floating UI
Floating UI is free and open source, proudly sponsored by the following organizations — consider joining them on Open Collective.
User onboarding and product adoption made simple
The one place to keep a business’s money flowing
Start playing via your package manager or CDN.
Install with npm, Yarn, or pnpm.Get started
Install with the jsDelivr CDN.Get started