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!


Places your floating element relative to another element.

Click the dots


Shifts your floating element to keep it in view.

Scroll the container


Changes the placement of your floating element to keep it in view.

Scroll up


Changes the size of your floating element to keep it in view.

Scroll the container


Dynamically positions an arrow element that is center-aware.

Scroll the container


Anchor relative to any coordinates, such as your mouse cursor.

Move your mouse

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 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

Interactions 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 React

Support Floating UI!

Floating UI is free and open source, proudly sponsored by the following organizations — consider joining them on Open Collective.

Sponsor logo


User onboarding and product adoption made simple

Sponsor logo

Modern Treasury

The one place to keep a business’s money flowing

Coupontoaster - Discount and Coupon CodesCell Tracking Apps - Parental Control Software Review Websitewazirx referral codeggc - espionner un téléphone Android iPhone Pour Control ParentalLiving FeedsTitan Asset ManagementDailycontributors BlogAriakit - Toolkit for building accessible UIsPacman 30th Anniversary DoodlePyJobs - Jobs for Python Developers

Ready to install?

Start playing via your package manager or CDN.

Package Manager

Install with npm, Yarn, or pnpm.

Get started


Install with the jsDelivr CDN.

Get started