@floating-ui/react

About

Floating UI for React

What detecting @floating-ui/react tells you about a site

@floating-ui/react is the React binding for Floating UI, the positioning engine that powers tooltips, popovers, dropdowns and menus, so its appearance means the app does serious anchored-overlay work and cares about getting placement, flipping and collision handling right. Because it is a low-level primitive rather than a finished component, finding it signals an engineering team building their own design system or a component library's internals, not someone wiring up off-the-shelf widgets. It is the kind of dependency that quietly underpins many other libraries.

Why the exact @floating-ui/react version matters

Floating UI is the successor to Popper.js and went through a significant rename and API overhaul on the way to its 1.0 line, and the React adapter itself reorganised hooks and interaction APIs across versions. The exact version therefore tells you which generation of the middleware-and-hooks model the code targets and whether it predates or follows the stable React-binding shape.

@floating-ui/react in a real-world stack

When you find @floating-ui/react in a bundle, it rarely travels alone. Often vendored inside Radix UI, Headless UI or a bespoke component library rather than imported directly.

Quick facts

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

What @floating-ui/react pulls in

@floating-ui/react declares 3 direct dependencies — each one also rides into any bundle that ships @floating-ui/react, so they are detection targets too. Reading them is a quick way to understand the package's real footprint .

How Sourcemap Explorer detects @floating-ui/react

@floating-ui/react ships as v0.27.20, published 2026-07-11 and carries 3 direct dependencies, 2 peer dependencies (react, react-dom), 84 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when @floating-ui/react rides inside a deployed bundle — here is how the detection works.

We catch @floating-ui/react from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@floating-ui/react/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `@floating-ui/react` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@floating-ui/react/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@floating-ui/react/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@floating-ui/react/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Recent versions

@floating-ui/react README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

[!NOTE] Popper is now Floating UI! For Popper v2, visit its dedicated branch and its documentation. For help on migrating, check out the Migration Guide.

Floating UI is a small library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more.

It offers two main features:

1. Anchor positioning: Anchor a floating element (such as a tooltip) to another element (such as a button) while simultaneously ensuring it stays in view as best as possible by avoiding collisions. This feature is available for all platforms.
2. User interactions for React: Hooks and components for composing interactions to create accessible floating UI components.

Sponsors

You can support Floating UI in a variety of ways on Open Collective.

Why

Floating elements are absolutely positioned, typically anchored to another UI element. Ensuring a floating element remains anchored next to another element can be challenging, especially in unique layout contexts like scrolling containers.

Absolute positioning can also cause problems when the floating element is too close to the edge of the viewport and becomes obscured, also known as a collision. When a collision occurs, the position must be adjusted to ensure the floating element remains visible.

Further, floating elements are often interactive, which can raise complex accessibility issues when designing user interactions.

Floating UI offers a set of low-level features to help you navigate these challenges and build accessible floating UI components.

Install

To install Floating UI, you can use a package manager like npm or a CDN. There are different versions available for different platforms.

Vanilla

Use on the web with vanilla JavaScript.

npm install @floating-ui/dom

You can either start by reading the tutorial, which teaches you how to use the library by building a basic tooltip, or you can jump right into the API documentation.

React

Use with React DOM or React Native.

React DOM

# Positioning + interactions
npm install @floating-ui/react

# Positioning only (smaller size)
npm install @floating-ui/react-dom

React Native

npm install @floating-ui/react-native

Vue

Use with Vue.

npm install @floating-ui/vue

Canvas or other platforms

If you're targeting a platform other than the vanilla DOM (web), React, or React Native, you can create your own Platform. This allows you to support things like Canvas/WebGL, or other platforms that can run JavaScript.

npm install @floating-ui/core

Contributing

This project is a monorepo written in TypeScript using pnpm workspaces. The website is using Next.js SSG and Tailwind CSS for styling.

• Fork and clone the repo
• Install dependencies in root directory with pnpm install
• Build initial package dist files with pnpm run build

Testing grounds

DOM

pnpm run --filter @floating-ui/dom dev in the root will launch the @floating-ui/dom development visual tests at http://localhost:1234. The playground uses React to write each test route, bundled by Vite.

Each route has screenshots taken of the page by Playwright to ensure all the functionalities work as expected; this is an easy, reliable and high-level way of testing the positioning logic.

Below the main container are UI controls to turn on certain state and options. Every single combination of state is tested visually via the snapshots to cover as much as possible.

React

pnpm run --filter @floating-ui/react dev in the root will launch the @floating-ui/react development tests at http://localhost:1234.

Credits

The floating shapes in the banner image are made by the amazing artists @artstar3d, @killnicole and @liiiiiiii on Figma — check out their work!

License

MIT

FAQ

Keep reading on Sourcemap Explorer