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.
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.
Tooltips
Floating elements that display information related to an anchor element on hover or focus.
Popovers
Floating elements that display an anchored interactive dialog on click.
Select Menus
Floating elements that display a list of options to choose from on click.
Comboboxes
Floating elements that combine an input and a list of searchable options to choose from.
Dropdown Menus
Floating elements that display a list of buttons that perform an action.
Dialogs
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:
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 kBSupport 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
Install
Start playing via your package manager or CDN.