Getting Started

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.

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

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

# 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

npm install @floating-ui/react-native

Vue

Use with Vue.

npm install @floating-ui/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

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.1.1/+esm';

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

UMD

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.1.1"></script>

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.1.1"></script>

All exports will be available on window.FloatingUIDOMwindow.FloatingUIDOM.

Package entry points

Floating UI uses process.env.NODE_ENVprocess.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'],
    }),
  ],
};

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

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