ai-agent

floating-ui: Precise UI positioning for sleek dropdowns and tooltips

Name: floating-ui: Precise UI positioning for sleek dropdowns and tooltips
Author: floating-ui

Leverage floating-ui’s TypeScript library to flawlessly position menus, popovers, and tooltips—ideal for founders building polished web interfaces. 33k+ GitHub stars.

From the repo · “A JavaScript library to position floating elements and create interactions for them.”

32,761 stars+8★ this week1,722 forksTypeScriptGuide quality 8/10 · reviewed Oct 5Install verified Sep 21Updated 10/22/2026100% free · open source

What it does

Floating-ui is a TypeScript library that provides precise control over floating elements, such as tooltips, popovers, and dropdowns, for web applications.

When to use it

•When developing custom UI components that require precise positioning and overlap management
•When integrating third-party libraries that require floating elements, such as date pickers or autocomplete inputs
•When creating complex, interactive web applications that require precise control over layout and positioning

Ready-to-paste prompt

Compute the position of a tooltip element relative to a button element: `const { x, y } = computePosition(document.querySelector('#button'), document.querySelector('#tooltip'), { placement: 'top' })`

Heads up: Make sure to include the `@floating-ui/dom` package in your TypeScript configuration, as it requires the `dom` package to be installed and imported correctly, otherwise, you may encounter errors related to missing types or modules.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup✓ Install verified 9/21/2026

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/floating-ui && curl -fsSL https://workflowstacks.com/api/skills/floating-ui/claude-skill -o ~/.claude/skills/floating-ui/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How floating-ui: Precise UI positioning for sleek dropdowns and tooltips works

Codeflow

Free to inspect

Floating-ui: Precise UI positioning for sleek dropdowns and tooltips is a large TypeScript project (~17k lines across 225 code files, plus 136 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit a month ago, MIT license, has a test suite.

Size

Large codebase

~17k lines · 225 code files · ~2 h to skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

TypeScript 69%MDX 18%JavaScript 12%CSS 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
package.json
Dependencies and the commands it exposes
3
packages/core/README.md
Inside packages/core/ — the main logic begins here

What's in each folder

packages/core/Core code — the actual logic31 files

extension/Sub-packages / plugins58 files

packages/dom/Package1134 files

website/Project website211 files

packages/react/Package108 files

packages/react-dom/Package23 files

packages/vue/Package22 files

packages/react-native/Package18 files

READMEHas testsDocumentedCI checksMIT licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup✓ Install verified 9/21/2026

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/floating-ui && curl -fsSL https://workflowstacks.com/api/skills/floating-ui/claude-skill -o ~/.claude/skills/floating-ui/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

floating-ui

Language

TypeScript