Get Started GitHub

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.

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

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.

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.

Use Floating UI with React

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

Route4Me

Best Route Planning and Route Optimization Software

Coupontoaster - Discount and Coupon CodesAriakit - Toolkit for building accessible UIsPyJobs - Jobs for Python DevelopersElectric UI - Tools for building user interfaces for hardware devices.MobilemallBestKruAutomatio - No code Web Scraping & Automation.WordHint - Connections Hint TodayStrands GameWordle SolverStrands Hint

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