A JavaScript library to position floating elements and create interactions for them.

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.


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

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.


Floating elements that display information related to an anchor element on hover or focus.


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.


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.


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

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 Websiteggc - espionner un téléphone Android iPhone Pour Control ParentalLiving FeedsAriakit - Toolkit for building accessible UIsPyJobs - Jobs for Python DevelopersSup Standup BotFitLivingTips - Health and Fitness BlogMobipast


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