Skip to content

Getting Started

Floating UI is a low-level library for creating "floating" elements like tooltips, popovers, dropdowns, menus, and more.

The library provides two key functionalities:

  1. Anchored positioning primitives: Given a reference element (such as a button), anchor the floating element next to it while simultaneously ensuring it is positioned optimally in view by preventing overflow and clipping. The reference element may be positioned anywhere on the screen and the floating element will remain anchored to it without overflowing the viewport edges using various adjustment techniques called middleware.
  2. Interaction primitives: Add accessible interactions that power floating elements to follow WAI-ARIA authoring practices, including event listeners, click outside/escape key dismissing, ARIA attributes, focus trapping, list navigation, typeahead, etc. This functionality is currently available for React DOM but will be made agnostic in the future.

The positioning engine features a tiny 600-byte core with strong tree-shaking support, is extensible through custom middleware, and can support any platform.

Install

Choose the package that suits you.

Vanilla DOM positioning engine

Use with vanilla JavaScript or a non-React framework (view tutorial).

npm install @floating-ui/dom

React DOM positioning engine

Use with React DOM (view docs).

npm install @floating-ui/react-dom

React DOM interactions and positioning engine

Primitive hooks and components, in addition to the positioning engine, to use with React DOM (view docs).

npm install @floating-ui/react-dom-interactions

React Native positioning engine

Use with React Native (view docs).

npm install @floating-ui/react-native

Canvas or other platforms

Learn about creating a Platform.

npm install @floating-ui/core

CDN

View details

Floating UI can be loaded via CDN using ESM or UMD format.

ESM

Import maps

When working in a low or no build context, it can be useful to consume code with bare module specifiers, e.g. import * from '@floating-ui/dom';. In order to do so, import maps clarify the origin of such references for the browser.

JSPM import map example
<script type="importmap">
  {
    "imports": {
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@0.4.5/dist/floating-ui.dom.esm.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@0.6.2/dist/floating-ui.core.esm.js"
      }
    }
  }
</script>

JSPM provides a generator for leveraging this API with their CDN.

UMD

<script src="https://unpkg.com/@floating-ui/core@0.6.2"></script>
<script src="https://unpkg.com/@floating-ui/dom@0.4.5"></script>

All exports will be available on window.FloatingUIDOM.

Package entry points

Using webpack, Vite, or Parcel? Skip this section as modern bundlers handle this for you.

Floating UI uses process.env.NODE_ENV to determine whether your build is in development or production mode. This allows us to add console warnings and errors during development to help you but ensure they get stripped out in production to keep the bundle size small.

This causes an error in Rollup and low/no-build setups. To solve this, Floating UI exports browser-ready ES modules. Leverage the "browser" package export condition to use these modules.

Rollup example

The browser option in the nodeResolve() plugin will select browser versions of packages if available.

import {nodeResolve} from '@rollup/plugin-node-resolve';
 
export default {
  // ...
  plugins: [
    nodeResolve({
      browser: true,
 
      // Add this line for development config, omit for
      // production config
      exportConditions: ['development'],
    }),
  ],
};
Next
Tutorial