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!

Placement

Places your floating element relative to another element.

Click the dots
CodeSandbox

Shift

Shifts your floating element to keep it in view.

Scroll the container
CodeSandbox

Flip

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

Scroll up
CodeSandbox

Size

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

Scroll the container
CodeSandbox

Arrow

Dynamically positions an arrow element that is center-aware.

Scroll the container
CodeSandbox

Virtual

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

Move your mouse
Tooltip
CodeSandbox

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

Usetiful

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

CDN

Install with the jsDelivr CDN.

Get started