@floating-ui/react
v0.27.19 MITFloating UI for React
@floating-ui/react Download Trends
About @floating-ui/react
Floating UI for React provides a comprehensive solution for positioning and managing floating elements in React applications. It tackles the common challenge of dynamically placing elements like tooltips, dropdowns, and popovers relative to other UI components, ensuring they remain visible and accessible within the viewport. This library abstracts away the complexities of scroll, resize, and boundary detection, offering developers a reliable way to handle these often-tricky UI interactions.
The core philosophy behind Floating UI is flexibility and control. It empowers developers with fine-grained control over positioning strategies and element behavior, making it suitable for a wide range of UI scenarios. The library is designed to be framework-agnostic, with specific packages like `@floating-ui/react` providing seamless integration with the React ecosystem. Its primary audience includes front-end developers building interactive user interfaces that require sophisticated popover and tooltip management.
The library's primary API pattern revolves around hooks, most notably the `useFloating` hook. This hook manages the state and logic for positioning, returning props that should be spread onto the floating element and its reference element. It handles calculations for placement, offsets, and flips to keep the element within bounds. Other key hooks like `useInteractions` further simplify common patterns like dismissals and hover behaviors.
`@floating-ui/react` is built to integrate smoothly into standard React workflows. It works effortlessly with common state management solutions and rendering patterns. Because it's a headless library, it doesn't impose any specific styling, allowing developers to use their preferred CSS solutions, whether it's plain CSS, CSS Modules, or styled-components. This flexibility makes it adaptable to numerous project architectures.
With a weekly download count of 13.9M and 32.5K GitHub stars, Floating UI is a mature and widely adopted solution in the React community. Its bundle size is notably small at 36.5 kB (gzipped), making it an efficient choice for performance-sensitive applications. The library is actively maintained, as indicated by its recent update on March 3rd, 2026, with a relatively low number of open issues (43) for a project of its popularity.
While highly capable, developers should be aware that Floating UI focuses solely on positioning and interaction logic. It does not provide UI components out-of-the-box, meaning developers must implement their own visual elements for tooltips, dropdowns, or popovers. This requires coupling the library's positioning logic with custom or third-party component rendering, which might add a slight overhead for developers seeking an all-in-one solution.
When to use
- When implementing interactive elements like tooltips, popovers, or dropdowns that need to dynamically position themselves relative to a reference element using the `useFloating` hook.
- When ensuring floating elements remain visible within the viewport by leveraging the `flip` middleware for automatic repositioning.
- When creating complex menus or dialogs that require precise offset control and alignment strategies via the `shift` and `offset` middleware.
- When integrating with custom or headless UI component libraries that require a robust positioning engine without opinionated styling.
- When building accessible UIs by managing focus and keyboard interactions with floating elements using the `useInteractions` hook.
- When targeting applications where minimal JavaScript bundle size is critical, given the reported 36.5 kB gzipped size.
When NOT to use
- If only a static, non-interactive overlay is needed — simple conditional rendering with CSS might suffice.
- When a pre-built, opinionated set of UI components for tooltips or dropdowns is desired, as `@floating-ui/react` requires custom component implementation.
- If the application exclusively uses server-side rendering without any client-side interactivity that would necessitate dynamic element positioning.
- For extremely simple, single-purpose elements where the overhead of implementing hooks and middleware is not justified.
- When a purely CSS-based solution for positioning elements within specific containers is sufficient and no viewport boundary checks are required.