Getting Started

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

The library provides two key functionalities:

1. Anchor positioning

Anchor a floating element (like a tooltip) to another element (like a button) while simultaneously ensuring it stays in view as best as possible with collision detection.

2. User interactions for React

Hooks and components for composing interactions to create accessible floating UI components.

Install

Choose the package that suits you.

Vanilla DOM positioning

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

npm install @floating-ui/dom

React DOM positioning

Use with React DOM (view docs).

npm install @floating-ui/react-dom

React DOM interactions and positioning

Craft interactions in addition to anchor positioning (view docs).

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

React Native positioning

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

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

ESM

import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.0.7/+esm';

UMD

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.0.2"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.0.7"></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.

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'],
    }),
  ],
};

export default {
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
};