Repository files navigation

Floating UI is a small library that helps you create"floating" elements such as tooltips, popovers, dropdowns, and more.

It offers two main features:

1. Anchor positioning: Anchor a floating element (such as a tooltip) toanother element (such as a button) while simultaneously ensuring it stays inview as best as possible by avoiding collisions. This feature is availablefor all platforms.
2. User interactions for React: Hooks and components for composinginteractions to create accessible floating UI components.

You can support Floating UI in a variety of ways onOpen Collective.

Floating elements are absolutely positioned, typically anchored to another UIelement. Ensuring a floating element remains anchored next to another elementcan be challenging, especially in unique layout contexts like scrollingcontainers.

Absolute positioning can also cause problems when the floating element is tooclose to the edge of the viewport and becomes obscured, also known as acollision. When a collision occurs, the position must be adjusted to ensure thefloating element remains visible.

Further, floating elements are often interactive, which can raise complexaccessibility issues when designing user interactions.

Floating UI offers a set of low-level features to help you navigate thesechallenges and build accessible floating UI components.

To install Floating UI, you can use a package manager like npm or aCDN. There are differentversions available for different platforms.

Use on the web with vanilla JavaScript.

npm install @floating-ui/dom

You can either start byreading the tutorial, which teaches youhow to use the library by building a basic tooltip, or you can jump right intotheAPI documentation.

Use withReact DOM orReact Native.

# Positioning + interactionsnpm install @floating-ui/react# Positioning only (smaller size)npm install @floating-ui/react-dom

npm install @floating-ui/react-native

Use withVue.

npm install @floating-ui/vue

If you're targeting a platform other than the vanilla DOM (web), React, or ReactNative, you can create your ownPlatform. This allows you to supportthings like Canvas/WebGL, or other platforms that can run JavaScript.

npm install @floating-ui/core

This project is a monorepo written in TypeScript usingpnpmworkspaces. The website is using Next.js SSG and Tailwind CSS for styling.

• Fork and clone the repo
• Install dependencies in root directory withpnpm install
• Build initial package dist files withpnpm run build

pnpm run --filter @floating-ui/dom dev in the root will launch the@floating-ui/dom development visual tests athttp://localhost:1234. Theplayground uses React to write each test route, bundled by Vite.

Each route has screenshots taken of the page by Playwright to ensure all thefunctionalities work as expected; this is an easy, reliable and high-level wayof testing the positioning logic.

Below the main container are UI controls to turn on certain state and options.Every single combination of state is tested visually via the snapshots to coveras much as possible.

pnpm run --filter @floating-ui/react dev in the root will launch the@floating-ui/react development tests athttp://localhost:1234.

The floating shapes in the banner image are made by the amazing artists@artstar3d,@killnicole and@liiiiiiii on Figma — check out their work!

MIT