Floating UI - Create tooltips, popovers, dropdowns, and more
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.
A new headless React component library built on top of Floating UI that provides a set of headless floating components (among others) — tooltips, popovers, menus, selects, preview cards, dialogs, toasts, and more.
Interactions for React
Build advanced floating components using Floating UI's React toolkit of components and hooks.
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 kB
shift()+0.6 kB
limitShift()+0.2 kB
flip()+0.8 kB
hide()+0.2 kB
offset()+0.1 kB
arrow()+0.5 kB
autoPlacement()+0.4 kB
size()+0.3 kB
inline()+0.6 kB
autoUpdate()+0.3 kB
DOM platform+2.5 kB
Install
Start playing via your package manager or CDN.