Floating UI
Low-level JavaScript library for positioning floating elements (tooltips, popovers, dropdowns, menus) relative to anchor elements. Handles collision detection, overflow prevention, placement flipping, and arrow positioning. Framework-agnostic core with React, Vue, and React Native adapters. Successor to Popper.js — more modern API, better TypeScript support, smaller bundle. Used internally by Radix UI, Headless UI, and many UI libraries.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Pure computation library — no network calls, no data persistence. No security concerns beyond standard XSS prevention in rendered content.
⚡ Reliability
Best When
You need precise floating element positioning with automatic viewport collision detection, or you're building a component library that needs robust tooltip/popover positioning.
Avoid When
You need complete accessible UI components — use Radix UI (which uses Floating UI internally) for complete primitives with positioning included.
Use Cases
- • Position tooltips, popovers, and dropdown menus that automatically flip and shift to stay within viewport boundaries
- • Build custom select menus, comboboxes, and date pickers with correct positioning without writing collision detection code
- • Create context menus, right-click menus, or floating panels that intelligently position relative to trigger elements
- • Implement accessible tooltips and popovers as the positioning layer, combined with accessibility libraries for ARIA
- • Replace Popper.js with a modern, tree-shakeable positioning library with better TypeScript and React integration
Not For
- • Complete UI components — Floating UI handles positioning only; use Radix UI or Headless UI for accessible component logic
- • CSS-only tooltips — simple use cases can use CSS :hover + position:absolute without JavaScript
- • Teams building with design systems that already include tooltip positioning (MUI, Chakra) — they use Floating UI internally already
Interface
Authentication
No authentication — pure client-side positioning library.
Pricing
MIT licensed. Completely free. Maintained by same team as Popper.js.
Agent Metadata
Known Gotchas
- ⚠ Floating UI handles positioning only — focus management, ARIA attributes, and keyboard navigation must be implemented separately or via Radix UI
- ⚠ @floating-ui/react package provides React hooks but still requires managing open/close state and focus manually
- ⚠ Middleware order matters — shift, flip, and offset middleware interact; wrong order produces unexpected placement
- ⚠ Portal rendering (appending floating element to body) is recommended to avoid z-index and overflow:hidden issues — requires portal setup
- ⚠ Position calculation runs on every render by default — use stable references (useRef, useMemo) to avoid performance issues with frequent re-renders
- ⚠ The arrow element positioning requires additional CSS (transform, width/height) — the library provides coordinates but rendering is developer responsibility
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for Floating UI.
Scores are editorial opinions as of 2026-03-06.