ai-agent

floating-ui: Easy Element Positioning

Name: floating-ui: Easy Element Positioning
Author: floating-ui

Get precise control over floating elements with floating-ui, a TypeScript library.

32,677 stars1,691 forksTypeScriptGuide quality 8/10Updated 7/11/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

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: Easy Element Positioning works

Codeflow

Free to inspect

Floating-ui: Easy Element Positioning 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

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