awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
floating-ui avatar

floating-ui/floating-ui

0
View on GitHub↗
32,629 stars·1,682 forks·TypeScript·MIT·18 viewsfloating-ui.com↗

Floating Ui

Floating UI is a JavaScript positioning library and layout engine designed to calculate the exact coordinates for floating interface elements such as tooltips, popovers, and dropdowns. It functions as a floating element orchestrator that ensures these components remain visible and aligned relative to a reference element.

The library features a platform-abstraction layer that decouples positioning logic from the document object model. This allows the engine to support both standard web environments and non-DOM targets, including canvas or graphics buffers, through custom coordinate and measurement implementations.

The system provides tools for managing spatial constraints and alignment rules, including collision detection and a middleware-based pipeline for adjusting coordinates. It also includes a dedicated debugger for inspecting and refining the placement of floating elements during the layout process.

Features

  • Floating Element Positioning - Calculates coordinates for tooltips and popovers to ensure they remain visible and aligned relative to reference elements.
  • Cross-Platform Positioning Engines - Offers a positioning system that supports both standard web environments and non-DOM targets like graphics buffers.
  • Element Positioning Utilities - Ships a comprehensive set of utilities for calculating the screen coordinates of floating elements relative to references.
  • Positioning Engines - Provides a dedicated engine for calculating precise screen coordinates for floating interface elements.
  • Reference-Anchor Models - Maps floating elements to target reference anchors using specific spatial constraints and alignment rules.
  • Non-DOM Renderers - Allows the definition of custom coordinate and measurement logic for rendering in canvas or graphics buffers.
  • Cross-Platform Abstraction Layers - Decouples positioning logic from the DOM to support various rendering environments through a unified interface.
  • Positioning Pipelines - Uses a pluggable middleware pipeline to process coordinate adjustments for flipping and shifting.
  • Accessible Interaction Patterns - Ensures floating components like tooltips and dropdowns remain interactive and correctly positioned across various layouts.
  • Custom Component Placement - Enables positioning of floating elements in non-DOM environments like canvas or graphics buffers.
  • Platform Interfaces - Provides a positioning interface to manage floating element logic in non-standard document environments.
  • Collision Detection - Implements collision detection to ensure floating elements remain within the visible screen area.
  • General Libraries - Toolkit for positioning floating elements like tooltips and menus.
  • Utilities and Helpers - Library for positioning floating elements like tooltips and popovers.

Star history

Star history chart for floating-ui/floating-uiStar history chart for floating-ui/floating-ui

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Projects sharing features with Floating Ui

These projects share indexed features with Floating Ui. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • atomiks/tippyjsatomiks avatar

    atomiks/tippyjs

    12,270View on GitHub↗

    Tippy.js is a JavaScript tooltip library and interactive popup framework used to create tooltips, popovers, and dropdowns. It functions as a floating UI component toolkit that renders content relative to a reference element with support for automatic positioning, flip-positioning, and offsets. The library acts as an accessible overlay manager, using ARIA attributes and focus management to ensure screen reader compatibility. It also serves as a CSS animation tool, providing utilities for transitions, spring physics, and themes to manage the visual entry and exit of floating interface elements.

    JavaScriptcomboboxdropdownmenu
    View on GitHub↗12,270
  • gilbarbara/react-joyridegilbarbara avatar

    gilbarbara/react-joyride

    7,588View on GitHub↗

    react-joyride is a user onboarding library for React applications used to create interactive guided tours and walkthroughs. It provides a framework for defining sequences of tooltips and beacons that highlight specific user interface elements to introduce users to application features. The library distinguishes itself through a programmatic controller that allows developers to manage tour state, navigation, and lifecycle events via external application logic. It supports a high degree of visual extensibility, allowing the replacement of default tooltips and beacons with custom components to m

    TypeScriptjoyridereactreact-component
    View on GitHub↗7,588
  • shipshapecode/tethershipshapecode avatar

    shipshapecode/tether

    8,489View on GitHub↗

    Tether is a DOM positioning engine designed to anchor floating user interface elements, such as tooltips and dropdowns, to target elements. It functions as a logic engine for managing the placement of overlays and synchronizing the position of secondary elements relative to primary anchors. The system includes collision detection and overflow prevention to ensure that floating menus and overlays remain within the visible viewport. It automatically repositions elements when they encounter page boundaries to prevent visual clipping. The tool manages dynamic element alignment and tracking durin

    JavaScripthacktoberfestjavascriptposition
    View on GitHub↗8,489
  • szhsin/react-menuszhsin avatar

    szhsin/react-menu

    1,219View on GitHub↗

    React Menu is a library for building accessible, keyboard-navigable dropdown and context menus within web applications. It provides a set of tools for creating complex, hierarchical navigation structures that support unlimited submenu nesting and standard accessibility patterns for screen reader compatibility. The library distinguishes itself through a focus on dynamic layout and positioning, utilizing real-time collision detection to adjust menu placement relative to anchor elements and viewport boundaries. It employs a portal-based rendering strategy to prevent clipping and z-index conflict

    JavaScriptaccessibilitycheckboxcontextmenu
    View on GitHub↗1,219
Compare all 30 related projects→

Frequently asked questions

What does floating-ui/floating-ui do?

Floating UI is a JavaScript positioning library and layout engine designed to calculate the exact coordinates for floating interface elements such as tooltips, popovers, and dropdowns. It functions as a floating element orchestrator that ensures these components remain visible and aligned relative to a reference element.

What are the main features of floating-ui/floating-ui?

The main features of floating-ui/floating-ui are: Floating Element Positioning, Cross-Platform Positioning Engines, Element Positioning Utilities, Positioning Engines, Reference-Anchor Models, Non-DOM Renderers, Cross-Platform Abstraction Layers, Positioning Pipelines.

Which projects share features with floating-ui/floating-ui?

Projects with overlapping indexed features include: atomiks/tippyjs — Tippy.js is a JavaScript tooltip library and interactive popup framework used to create tooltips, popovers, and… gilbarbara/react-joyride — react-joyride is a user onboarding library for React applications used to create interactive guided tours and… shipshapecode/tether — Tether is a DOM positioning engine designed to anchor floating user interface elements, such as tooltips and… szhsin/react-menu — React Menu is a library for building accessible, keyboard-navigable dropdown and context menus within web… angular-ui/bootstrap — This project is a collection of native directives designed to implement the Bootstrap component framework within… mozilla-firefox/firefox — Firefox is a cross-platform web browser engine designed to render web content, execute JavaScript, and manage secure…