About Floating UI
Floating UI is a JavaScript library for positioning floating elements such as tooltips, popovers and dropdowns. It also offers interaction helpers for those elements.
What it does
Floating UI places an element next to an anchor and keeps it in view. When there is not enough room, it can flip the element to another side, shift it along the edge, or resize it to fit. An arrow element can stay centered on its anchor. Virtual anchors let you position an element relative to a point, such as the mouse cursor. Official bindings exist for the web, React DOM, React Native and Vue, and each module can be tree-shaken by your bundler to keep the final bundle small.
Key features
- Anchor positioning with collision avoidance
- Flip, shift and size modifiers
- Arrow that stays centered on its anchor
- Virtual anchors for cursor-based positioning
- Tree-shakeable modules
Who it's for
Developers building tooltips, menus, selects and dialogs who need reliable placement on every screen size. Component library authors who want low-level control over how floating elements move and stay visible will also find it useful.
Pricing and good to know
Floating UI is open source under the MIT license, so it is free to use. It handles positioning and interactions, but it does not provide any styling. The newer Base UI library is built on top of it and offers ready-made floating components if you do not want to write the interaction code yourself.
Highlights
- Anchor positioning with collision avoidance
- Flip, shift and size modifiers
- Arrow that stays centered on its anchor
- Virtual anchors for cursor-based positioning
- Tree-shakeable modules for small bundles
