floating-ui.com Open in urlscan Pro
35.156.224.161  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Get Started GitHub

A JavaScript library to position floating elements and create interactions for
them.


SMART ANCHOR POSITIONING

Anchor a floating element next to another element while making sure it stays in
view by avoiding collisions. This lets you position tooltips, popovers, or
dropdowns optimally.


PLACEMENT

Places your floating element relative to another element.

Click the dots

Reference
top
CodeSandbox


SHIFT

Shifts your floating element to keep it in view.

Scroll the container

Reference
Popover

CodeSandbox


FLIP

Changes the placement of your floating element to keep it in view.

Scroll down

Reference
Tooltip

CodeSandbox


SIZE

Changes the size of your floating element to keep it in view.

Scroll the container

Reference
Dropdown

CodeSandbox


ARROW

Dynamically positions an arrow element that is center-aware.

Scroll the container

Reference


CodeSandbox


VIRTUAL

Anchor relative to any coordinates, such as your mouse cursor.

Move your mouse
Tooltip
CodeSandbox


INTERACTIONS FOR REACT

Build your own floating UI components with React. From simple tooltips to select
menus, you have full control while ensuring fully accessible UI experiences.


TOOLTIPS

Floating elements that display information related to an anchor element on hover
or focus.




POPOVERS

Floating elements that display an anchored interactive dialog on click.

Balloon name


SELECT MENUS

Floating elements that display a list of options to choose from on click.

Select balloon color

Select...


COMBOBOXES

Floating elements that combine an input and a list of searchable options to
choose from.




DROPDOWN MENUS

Floating elements that display a list of buttons that perform an action.

Edit balloon


DIALOGS

Floating windows overlaid on the UI, rendering content underneath them inert.

Delete balloon
Use Floating UI with React


TREE-SHAKEABLE & PLATFORM-AGNOSTIC

In addition to official bindings for the web, React DOM, React Native, and Vue,
Floating UI also supports <canvas>, and each module is fully tree-shakeable by
your bundler:

computePosition()+0.6 kB
shift()+0.6 kB
limitShift()+0.2 kB
flip()+0.8 kB
hide()+0.2 kB
offset()+0.1 kB
arrow()+0.5 kB
autoPlacement()+0.4 kB
size()+0.3 kB
inline()+0.6 kB
autoUpdate()+0.3 kB
DOM platform+2.5 kB


SUPPORT FLOATING UI

Floating UI is free and open source, proudly sponsored by the following
organizations — consider joining them on Open Collective.


USETIFUL

User onboarding and product adoption made simple


MODERN TREASURY

The one place to keep a business’s money flowing


DOPT

Dopt gives developers UI components and SDKs to build seamless onboarding and
education experiences in minutes.




INSTALL

Start playing via your package manager or CDN.


PACKAGE MANAGER

Install with npm, Yarn, or pnpm.

Get started


CDN

Install with the jsDelivr CDN.

Get started

© 2024 • MIT License

Floating UI is the evolution of Popper 2, designed to bring the project to a new
level.

Floating shapes in the header are licensed under CC BY from Vic and Lisa Star.
Partial modifications were made.

This site is powered by Netlify.