Getting Started
Floating UI is a library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.
It offers two main features:
- 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.
- 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
(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 DOM or React Native.
React DOM
npm install @floating-ui/react
npm install @floating-ui/react
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.2.9/+esm';
import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.9/+esm';
UMD
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.9"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.2.9"></script>
All exports will be available on window.FloatingUIDOM
window.FloatingUIDOM
.
Migration from Popper
If you are coming to Floating UI from Popper v2, there is a migration guide available here.