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

Mobile Mall - Mobile Phone Prices in PakistanCoupontoaster - Discount and Coupon CodesCell Tracking Apps - Parental Control Software Review Websitewazirx referral codedpcoupon - coupon codes and discountsggc - espionner un téléphone Android iPhone Pour Control ParentalLiving FeedsBest Android Apps, Downloads & How to GuidesTitan Asset ManagementDailycontributors BlogAriakit - Toolkit for building accessible UIsIbomma AppPacman 30th Anniversary Doodle

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