A JavaScript library for anchor positioning — anchor a floating element next to another element while making sure it stays in view optimally. This lets you position tooltips, popovers, or dropdowns to efficiently float on top of the UI!
Virtual
Anchor relative to any coordinates, such as your mouse cursor.
Light as a feather.
This positioning toolkit has a platform-agnostic 0.6 kB core (minified + Brotli compressed), with official bindings for the web, React DOM, React Native, and Vue.
Each module is fully tree-shakeable by your bundler:
computePosition()+0.6 kBshift()+0.6 kBlimitShift()+0.2 kBflip()+0.8 kBhide()+0.2 kBoffset()+0.1 kBarrow()+0.5 kBautoPlacement()+0.4 kBsize()+0.3 kBinline()+0.6 kBautoUpdate()+0.3 kBDOM platform+2.5 kBInteractions for React.
In addition to positioning, there are also interaction primitives to build floating UI components with React. This includes event hooks for hover, focus or click, modal and non-modal focus management, keyboard list navigation, typeahead, portals, backdrop overlays, screen reader support, and more.
Use Floating UI with ReactSupport Floating UI!
Floating UI is free and open source, proudly sponsored by the following organizations — consider joining them on Open Collective.
Usetiful
User onboarding and product adoption made simple
Modern Treasury
The one place to keep a business’s money flowing
Ready to install?
Start playing via your package manager or CDN.