OSS Tanbou
Sign in with GitHub

Floating UI

View on GitHubProject website

low-level positioning and interaction primitives for tooltips, popovers, dropdowns, and other floating elements

OSS scale score 278.8OSS health 89Update pace 3 commits/30d
About these scores

OSS scale score is an unbounded metric that log-compresses and weights Stars, Watchers, Forks, and Contributors. Discovery score is the current OSS scale score minus the score at discovery. Update pace is commits in the last 30 days, growth momentum is the OSS scale score difference within the recent observation window, and OSS health is a 0–100 rating based on available recency, Community Health, and release data.

Stars
32,756
Primary language
TypeScript
License
MIT
Repository last updated
Sep 28, 2026
On this page

Overview

Floating UI positions floating elements such as tooltips, popovers, and dropdowns relative to anchors while adjusting placement to avoid viewport collisions. Its React package combines positioning with hooks for hover, focus, click, dismiss, and other interactions used to build accessible floating UI.

Features and best fit

Based on official documentation; not hands-on tested · Content checked:

Key features

Position anchored floating elements while handling viewport collisions

The library computes coordinates from reference and floating-element geometry, with middleware such as offset, flip, and shift for spacing, collision avoidance, and placement adjustments.

Sources: [1][4]

Compose positioning and interaction hooks in React

@floating-ui/react combines React DOM positioning with hooks and components for user interactions such as hover, focus, click, and dismiss.

Sources: [1][2]

Choose packages for DOM, React, Vue, React Native, or custom platforms

The monorepo includes @floating-ui/dom, @floating-ui/react, @floating-ui/react-native, @floating-ui/vue, and @floating-ui/core, so applications can select the platform and feature scope they need.

Sources: [1]

Best fit

Fits design systems that standardize tooltip and popover positioning and interactions

It is useful when teams want to share placement, collision handling, dismissal, and focus behavior instead of reimplementing these concerns in every floating component.

Sources: [1][4]

Before adoption

React package 0.27.20 requires React and React DOM 17 or later

Package metadata declares React and React DOM >=17.0.0 as peer dependencies. Other platforms should use their corresponding package.

Sources: [2]

Version 0.27.20 fixes scroll-listener and TypeScript optional-property behavior

The patch removes redundant passive options from scroll listeners and supports explicit undefined for optional properties when exactOptionalPropertyTypes is enabled.

Sources: [3]

Official sources

  1. [1]Floating UI README(2026-10-05)
  2. [2]@floating-ui/react 0.27.20 package metadata(2026-10-05)
  3. [3]@floating-ui/react 0.27.20 release(2026-10-05)
  4. [4]Floating UI React documentation(2026-10-05)
  5. [5]Floating UI MIT license(2026-10-05)
Supplemental curator note

Choose the package by scope: @floating-ui/react-dom for positioning-only React DOM usage or @floating-ui/react when interaction hooks are also needed.

Try it in 3 steps

  1. 1

    Install pinned Floating UI React 0.27.20

    Create an isolated npm project with the React package and exact peer dependencies.

    demo=$(mktemp -d "${TMPDIR:-/tmp}/floating-ui.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @floating-ui/react@0.27.20 react@19.2.0 react-dom@19.2.0
  2. 2

    Verify the package version

    Require the installed React package to match the reviewed version.

    test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/@floating-ui/react/package.json')).version)")" = '0.27.20'
  3. 3

    Check positioning and interaction exports

    Verify representative positioning middleware and React interaction hooks without starting a DOM.

    test "$(node --input-type=module -e "import * as F from '@floating-ui/react'; console.log(['useFloating','offset','flip','shift','useHover'].every(k=>k in F))")" = 'true'
Check the official README

Growth

Growth trends · Last 30 days

32,756 Stars

Trend data is still being collected.

Development activity

Last 90 days · weekly

Commits (last 30 days)
3
Open PRs
31

Development activity is still being collected.

Built with

Categories and tags

Categories

Tags

GitHub data

GitHub dataView detailed GitHub data
View on GitHub

GitHub Topics

  • positioning-engine
  • tooltip
  • position
  • dropdown
  • popover
  • positioning
  • tooltip-position
  • popovers
  • hacktoberfest
Stars
32,756
Forks
1,716
Watchers
255
Open issues
38
Contributors
126
Owner type
Organization
Primary language
TypeScript
License
MIT
Repository last updated
Sep 28, 2026
Write a related article

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Report incorrect information

Tell us if any listing information is incorrect or outdated.

After reading this page, do you know what to do next?