# 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](/docs/computePosition) with vanilla JavaScript (`dom` refers to the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) to work with HTML/SVG elements). ```bash npm install @floating-ui/dom ``` ### React Use with [React](/docs/react). ```bash npm install @floating-ui/react ``` A smaller alternative to the above package exists, which only wraps `@floating-ui/dom` positioning features without any interactions: ```bash # Positioning only (smaller size) npm install @floating-ui/react-dom ``` ### React Native Use with [React Native](/docs/react-native). ```bash npm install @floating-ui/react-native ``` ### Vue Use with [Vue](/docs/vue). ```bash 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](/docs/platform). This allows you to support things like Canvas/WebGL, or other platforms that can run JavaScript. ```bash npm install @floating-ui/core ``` ## CDN Floating UI can be loaded via CDN using ESM or UMD format. ### ESM ```js import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@__DOM_VERSION__/+esm'; ``` ### UMD ```html ``` All exports will be available on `window.FloatingUIDOM{:js}`. ## Migration from Popper If you are coming to Floating UI from Popper v2, there is a [migration guide available here](/docs/migration).