Getting Started

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

Two key features are provided:

Positioning

Floating UI provides a toolkit of positioning features that let you robustly anchor an absolutely-positioned floating element next to a given reference element. For example, a popover floats next to and remains anchored to its triggering button, even while the page scrolls.

It also provides features to avoid collisions with the viewport, as absolute positioning often leads to unwanted overflow depending on the location of the positioning reference.

Interactions

Floating elements have a wide range of different and complex interactions. For example, a tooltip’s interactions (hover or focus to open a label) has little in common with a combobox (focus and type to select options) despite them both “floating” and anchoring themselves to a trigger.

Floating UI’s React package offers a toolkit of primitive hooks and components that let you build reusable floating components with complex and accessible interactions.

Design

Floating UI is designed to be highly modular, so everything is as tree-shakeable as possible. You can use as much or as little of the library as you want, and your bundle size will adapt.

Floating UI is also designed to be flexible and hackable. You can use it with any framework, or even without a framework, or on other platforms like React Native. You can also customize it to your needs, and won’t feel limited in what you can achieve.

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 (dom refers to the Document Object Model to work with HTML/SVG elements).

npm install @floating-ui/dom

npm install @floating-ui/dom

React

Use with React.

npm install @floating-ui/react

npm install @floating-ui/react

React Native

Use with 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.5.3/+esm';

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

UMD

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

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

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

Migration from Popper

If you are coming to Floating UI from Popper v2, there is a migration guide available here.