awesome-repositories.com
Blog
awesome-repositories.com

Entdecke die besten Open-Source-Repositories mit KI-gestützter Suche.

EntdeckenKuratierte SuchenOpen-Source-AlternativenSelf-hosted SoftwareBlogSitemap
ProjektÜber unsRanking-MethodikPresseMCP-Server
RechtlichesDatenschutzAGB
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

45 Repos

Awesome GitHub RepositoriesOverlay Components

UI elements that float above the main content, such as dialogs, modals, and popovers.

Distinguishing note: Specifically targets fixed-position overlay elements rather than general layout components.

Explore 45 awesome GitHub repositories matching user interface & experience · Overlay Components. Refine with filters or upvote what's useful.

Awesome Overlay Components GitHub Repositories

Finde die besten Repos mit KI.Wir suchen mit KI nach den am besten passenden Repositories.
  • mantinedev/mantineAvatar von mantinedev

    mantinedev/mantine

    31,263Auf GitHub ansehen↗

    Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti

    Package: @mantine/core Import: import { Dialog } from '@mantine/core'; Description: Display a fixed overlay dialog at any side of the screen ## Usage Dialog is a simplified version of the Modal component. It does not i

    TypeScriptdark-modedark-themehooks
    Auf GitHub ansehen↗31,263
  • react-bootstrap/react-bootstrapAvatar von react-bootstrap

    react-bootstrap/react-bootstrap

    22,608Auf GitHub ansehen↗

    React Bootstrap is a frontend component framework and responsive UI kit that translates the Bootstrap CSS framework into a React-based component architecture. It provides a collection of reusable, pre-styled interface elements and grid systems designed for consistent, responsive web development. The library distinguishes itself by wrapping raw HTML markup in React components to manage accessibility and stateful behaviors. It utilizes a centralized theme provider to propagate global configuration and breakpoints, while employing portal-based rendering for overlays to prevent clipping issues.

    Provides interactive overlays including modals, popovers, and tooltips that render above primary content.

    TypeScriptbootstraphacktoberfestjavascript
    Auf GitHub ansehen↗22,608
  • ratatui/ratatuiAvatar von ratatui

    ratatui/ratatui

    18,525Auf GitHub ansehen↗

    Ratatui is a Rust framework for building interactive, stateful terminal user interfaces. It provides a modular architecture that maps application data to visual components, enabling the creation of complex, text-based applications that run directly in the terminal. The library distinguishes itself through an immediate-mode rendering system that utilizes double-buffering to minimize flickering and reduce communication overhead. It employs a constraint-based layout engine to partition screen space into nested segments, allowing for the construction of sophisticated visual hierarchies that remai

    Supports drawing widgets on top of existing content to create popup windows and overlays.

    Rustcliratatuirust
    Auf GitHub ansehen↗18,525
  • keycastr/keycastrAvatar von keycastr

    keycastr/keycastr

    14,608Auf GitHub ansehen↗

    Keycastr is a system-level utility for macOS that captures and displays keyboard and mouse interactions as visual overlays on the desktop. By registering global event taps within the operating system, it monitors input actions in real time and renders them through transparent, non-interactive windows that float above other active applications. The application distinguishes itself through a plugin-based architecture that allows for the integration of custom modules to define how input events are rendered. Users can manage the lifecycle and positioning of these visual elements through a native

    Provides draggable, floating UI components for displaying input feedback on the desktop.

    Objective-C
    Auf GitHub ansehen↗14,608
  • bootstrap-vue/bootstrap-vueAvatar von bootstrap-vue

    bootstrap-vue/bootstrap-vue

    14,450Auf GitHub ansehen↗

    Bootstrap-vue is a Vue.js component library and responsive UI kit based on the Bootstrap CSS framework. It provides a frontend component suite of reusable interface elements designed for building mobile-first websites and web applications. The project wraps Bootstrap CSS classes in Vue components to manage styles and behaviors through reactive state. It integrates a responsive layout management system that synchronizes internal component states with Bootstrap's grid system and device breakpoints. The library covers a wide range of interface capabilities, including data display with sortable

    Implements a background overlay layer used to dim the screen or block interaction during active overlays.

    JavaScripta11yaccessibilityaccessible
    Auf GitHub ansehen↗14,450
  • tamagui/tamaguiAvatar von tamagui

    tamagui/tamagui

    13,729Auf GitHub ansehen↗

    Tamagui is a cross-platform user interface framework designed to build high-performance, themeable applications that share logic and styling across web and mobile environments. It functions as a comprehensive design system orchestrator, providing a collection of type-safe components that compile to optimized atomic CSS for the web and native code for mobile platforms. By utilizing a build-time compiler, the framework eliminates runtime overhead, ensuring consistent visual output and interaction behavior regardless of the target platform. The framework distinguishes itself through its advanced

    Mounts floating overlay components like dialogs and tooltips at the application root using scoped portals.

    TypeScriptatomic-csscss-in-jsoptimizing-compiler
    Auf GitHub ansehen↗13,729
  • facebookarchive/asyncdisplaykitAvatar von facebookarchive

    facebookarchive/AsyncDisplayKit

    13,345Auf GitHub ansehen↗

    AsyncDisplayKit is an asynchronous UI framework and performance library for iOS. It provides a collection of performant alternatives to standard views, allowing developers to build responsive interfaces by offloading layout and rendering tasks to background threads. The framework is centered around a declarative layout engine based on a flexbox model, which calculates element positions and sizes asynchronously. It utilizes a node-based abstraction to wrap native views, enabling the instantiation and configuration of UI hierarchies on background threads to prevent main thread blocking. The sy

    Places elements directly on top of others, stretching the overlay to match the base child's dimensions.

    Objective-C++
    Auf GitHub ansehen↗13,345
  • atomiks/tippyjsAvatar von atomiks

    atomiks/tippyjs

    12,270Auf GitHub ansehen↗

    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.

    Implements the core capability of generating floating popovers containing text or HTML anchored to reference elements.

    JavaScriptcomboboxdropdownmenu
    Auf GitHub ansehen↗12,270
  • didi/logicflowAvatar von didi

    didi/LogicFlow

    11,441Auf GitHub ansehen↗

    LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business process diagrams. It serves as a customizable diagramming engine for rendering business process models, entity relationship diagrams, and unified modeling language charts. The system is characterized by a plugin-based architecture that allows developers to define specialized graphical elements and register pluggable modules. A distinctive feature is its overlay system, which positions standard HTML components on top of the SVG canvas to create interactive menus and control pan

    Integrates HTML components as floating menus and panels using coordinate transformations on an SVG canvas.

    TypeScriptbpmndiagramdiagramming
    Auf GitHub ansehen↗11,441
  • picturepan2/spectreAvatar von picturepan2

    picturepan2/spectre

    11,317Auf GitHub ansehen↗

    Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

    Displays small content containers as overlays positioned around a target element using CSS.

    CSS
    Auf GitHub ansehen↗11,317
  • gui-cs/terminal.guiAvatar von gui-cs

    gui-cs/Terminal.Gui

    11,068Auf GitHub ansehen↗

    Terminal.Gui is a cross-platform .NET toolkit for building interactive text-based user interfaces. It provides a component-based architecture, a terminal rendering engine, and a declarative layout system to create console applications that run consistently across Windows, macOS, and Linux. The framework distinguishes itself with a comprehensive set of interactive console widgets, including data grids, hex editors, and hierarchical tree components. It supports advanced visual capabilities such as 24-bit True Color, Sixel image support, and a relative-coordinate layout system that adapts to ter

    Implements temporary overlay views that can host content and return typed results to the calling view.

    C#consoleconsole-applicationcross-platform
    Auf GitHub ansehen↗11,068
  • cosscom/cossAvatar von cosscom

    cosscom/coss

    10,125Auf GitHub ansehen↗

    Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a comprehensive kit of interactive elements and layout building blocks that follow screen reader and keyboard navigation standards. The project functions as a UI overlay management library, offering specialized tools for implementing anchored popovers, tooltips, and slide-out panels with smooth transitions. It includes a set of accessible form primitives and selection controls to ensure compatibility across different assistive technologies. Its broader capabilities cover the const

    Manages anchored popovers and tooltips with precise positioning and smooth transitions.

    TypeScriptnextjsradix-uireact
    Auf GitHub ansehen↗10,125
  • unovue/shadcn-vueAvatar von unovue

    unovue/shadcn-vue

    9,425Auf GitHub ansehen↗

    shadcn-vue is an accessible design system framework and UI component library for Vue applications. It provides a collection of accessible, unstyled interface elements and pre-designed building blocks styled with Tailwind CSS, all of which are built on top of Radix Vue primitives. The project utilizes a command line interface to install specific components and themes directly into a local project directory rather than as pre-compiled dependencies. This distribution model allows users to own and modify the source code locally to create a custom design language. The library covers a broad range

    Ships floating UI elements such as dialogs, popovers, and tooltips that appear above the main content.

    TypeScriptaccessiblecomponent-libraryradix-vue
    Auf GitHub ansehen↗9,425
  • mui/base-uiAvatar von mui

    mui/base-ui

    8,711Auf GitHub ansehen↗

    Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range

    Provides accessible popovers anchored to trigger elements with integrated focus management.

    TypeScriptaccessibilitydesign-systemreact
    Auf GitHub ansehen↗8,711
  • emilkowalski/vaulAvatar von emilkowalski

    emilkowalski/vaul

    8,426Auf GitHub ansehen↗

    Vaul is a React drawer component used to create accessible, draggable bottom sheets and slide-up panels. It serves as a mobile-friendly alternative to traditional dialogs and modals by rendering content into a separate DOM node via a portal to avoid layout nesting issues. The library features configurable snap points that allow panels to lock into specific vertical heights during drag gestures. It supports hierarchical UI layering, enabling the use of nested drawers for complex navigation or multi-level menus. The component includes an accessibility layer with ARIA announcements and focus ma

    Allows configuring whether a drawer closes via overlay interaction or requires a manual handle drag.

    TypeScriptdialogdrawerreact
    Auf GitHub ansehen↗8,426
  • microsoft/reactxpAvatar von microsoft

    microsoft/reactxp

    8,257Auf GitHub ansehen↗

    ReactXP is a framework for building cross-platform mobile and web applications from a single codebase using React. It provides a declarative interface that maps to different native implementation sets depending on the target environment. The project enables consistent visual experiences across operating systems through a flexbox-based layout engine, a virtual stack for navigation management, and a unified native-bridge API for accessing system services. It distinguishes itself with specialized capabilities for declarative animation orchestration, platform-specific logic resolution, and an aut

    Implements fullscreen overlay components that block background interaction to focus attention on specific elements.

    TypeScript
    Auf GitHub ansehen↗8,257
  • junixapp/xpopupAvatar von junixapp

    junixapp/XPopup

    8,022Auf GitHub ansehen↗

    XPopup is an Android popup UI framework and overlay component library used to build customizable dialogs, bottom sheets, and overlay views. It serves as a dialog engine for creating high-performance popup views and provides a toolkit for executing entrance and exit transitions. The library is distinguished by its ability to render ultra-long, high-resolution images using memory-efficient loading and drag-to-dismiss interactions. It supports displaying overlay views while an application is in the background through system overlay permissions. The framework covers anchor-based positioning for

    Provides a library of floating overlay components including dialogs, modals, and bottom sheets.

    Javaandroidbottomsheetdialog
    Auf GitHub ansehen↗8,022
  • unovue/reka-uiAvatar von unovue

    unovue/reka-ui

    6,574Auf GitHub ansehen↗

    Creates fully accessible popovers that follow WAI-ARIA patterns with customizable positioning and focus management.

    Vueaccessibilityaccessiblecomponent-library
    Auf GitHub ansehen↗6,574
  • shopify/polaris-reactAvatar von Shopify

    Shopify/polaris-react

    6,174Auf GitHub ansehen↗

    Polaris React is a production-ready component library that implements Shopify's Polaris design system for building consistent merchant-facing admin interfaces. It provides a comprehensive set of reusable React components, including accessible form inputs, data display elements, layout and navigation structures, and visual feedback indicators, all styled through a semantic color token system applied via CSS custom properties for dynamic light and dark mode support. The library distinguishes itself with an icon-first visual language featuring over 400 commerce-specific SVG icons delivered as fi

    Provides a popover component that opens a small overlay on demand and closes on outside interaction.

    TypeScriptcomponent-librarydesign-systemdesign-systems
    Auf GitHub ansehen↗6,174
  • creativetimofficial/material-kitAvatar von creativetimofficial

    creativetimofficial/material-kit

    5,926Auf GitHub ansehen↗

    Material Kit is an open-source UI component library that provides pre-styled Material Design elements for building responsive web interfaces with Bootstrap 5. It offers a collection of reusable components like buttons, inputs, navbars, cards, and modals that follow Google's Material Design guidelines, along with a 12-column flexbox grid system for fluid layouts that adapt to any screen size. The kit distinguishes itself by including pre-built page sections such as headers, feature blocks, pricing tables, and footers that can be combined into complete page layouts, reducing the time needed to

    Provides modals, tooltips, popovers, and datepickers that appear on top of page content.

    HTMLbootstrapbootstrap-material-designbootstrap5
    Auf GitHub ansehen↗5,926
Vorherige123Nächste
  1. Home
  2. User Interface & Experience
  3. Overlay Components

Unter-Tags erkunden

  • Feature Guidance OverlaysUI overlays that highlight specific areas and provide prompts to guide users through new features. **Distinct from Overlay Components:** Distinct from general overlays as it focuses on educational/guidance markers and focus areas.
  • Flyout Panels3 Sub-TagsSide-aligned overlay panels that slide into the viewport. **Distinct from Overlay Components:** Specifically covers side-sliding panels, whereas Overlay Components is a general category for all floating elements.
  • Layer Index StackingControls the stacking order of multiple nested overlays using a CSS variable as an offset from a shared base z-index. **Distinct from Overlay Components:** Distinct from Overlay Components: focuses on the z-index stacking mechanism via CSS variables, not the overlay components themselves.
  • Popover Overlays8 Sub-TagsSmall content containers that appear as overlays positioned relative to a target element. **Distinct from Overlay Components:** Specifically handles popovers anchored to elements, whereas Overlay Components covers broader fixed-position elements like modals.