<PageCard>
<CircleImage name="getting-started"  />

# Getting Started

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

</PageCard>

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
```

<Notice>

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
```

</Notice>

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

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).
