Awesome GitHub RepositoriesFloating Element Positioning

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 measure

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

Clay is a header-only layout engine designed for C and C++ applications that computes element positions and dimensions using a declarative box model. By operating as an immediate-mode framework, it calculates interface geometry dynamically on every frame, allowing for the creation of responsive and fluid user interfaces without maintaining persistent state. The library functions as a platform-agnostic tool that decouples layout logic from specific graphics backends. It provides a flexible coordinate system that supports layered elements, such as modals and tooltips, alongside standard documen

Shepherd is a client-side onboarding framework and interactive product tour library used to create step-by-step guided walkthroughs. It functions as a UI guided tour system and DOM element highlighting tool that displays instructional overlays and tooltips to guide users through a web application interface. The system features a dynamic layout engine for anchoring tooltips to target elements and preventing screen overflow. It supports multi-element highlighting to draw attention to several UI components simultaneously and includes focus trapping to restrict keyboard navigation to active tour

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.

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

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

hint.css is a pure CSS tooltip library and styling framework used to create accessible informational pop-ups. It functions as a lightweight user interface component that transforms ARIA attributes into visible tooltips without the use of JavaScript. The framework is designed to be customizable, offering a system of configurable class prefixes to prevent naming conflicts within larger web projects. It utilizes a BEM-inspired namespace to ensure stylesheets remain conflict-free when integrated into existing environments. The library covers a range of UI capabilities, including directional posi

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

This project is a self-hosted bot protection service and CAPTCHA alternative that verifies human identity without relying on third-party tracking. It utilizes a combination of WebAssembly-based proof-of-work puzzles and browser instrumentation to distinguish humans from automated bots. The system is delivered as dockerized security middleware and a privacy-first verification API that operates without the use of cookies or user fingerprinting. The service differentiates itself by using GPU-resistant time-lock algorithms and instrumentation-based detection to identify headless browsers and auto

Magic of CSS is a structured tutorial series that teaches web developers advanced CSS layout, typography, and animation techniques through hands-on examples. The course covers the full spectrum of CSS capabilities, from foundational box model and positioning concepts to sophisticated animation and interactive state management, all without relying on JavaScript. The series distinguishes itself by teaching practical, real-world CSS patterns such as inline-block justified grids, percentage-based absolute positioning, table-display vertical centering, and letter-span styling techniques. It demons

ngx-bootstrap هي مجموعة من أدوات واجهة المستخدم ومكونات Bootstrap المصممة خصيصاً لإطار عمل Angular. توفر مكتبة من عناصر الواجهة القابلة لإعادة الاستخدام المصممة للعمل مع محرك تجميع وعرض Angular Ivy. تتيح المكتبة دمج مكونات Bootstrap في تطبيقات Angular لإنشاء واجهات مستخدم مستجيبة دون الحاجة إلى CSS أو JavaScript يدوي. تحل محل الحاجة إلى jQuery باستخدام توجيهات Angular لإدارة الحالة ومحرك تحديد موضع تكيفي للعناصر العائمة. تغطي مجموعة المكونات مجموعة واسعة من العناصر التفاعلية، بما في ذلك عناصر التحكم في التنقل مثل علامات التبويب والترقيم، والنوافذ المتراكبة مثل النوافذ المنبثقة (modals) والتلميحات (popovers)، وأدوات إدخال البيانات مثل منتقي التاريخ والوقت. تتضمن أيضاً أدوات التخطيط والتعليقات مثل الأكورديون، وأشرطة التقدم، والتنبيهات.

Painter هو نظام عرض تصريحي يحول تعريفات JSON إلى صور بصرية مصممة. يعمل كمحرك عرض من JSON إلى صورة يقوم بتحويل بيانات التخطيط المهيكلة إلى أشكال متجهة، ونصوص مصممة، ورموز QR على لوحة رسم. يتميز النظام بمحرك قوالب صور ديناميكي يستخدم حسابات الإحداثيات النسبية لتحديد مواضع العناصر بناءً على حدود المكونات الأخرى. ويدعم إنشاء قوالب تفاعلية حيث يمكن للمستخدمين سحب العناصر وتغيير حجمها وحذفها في الوقت الفعلي، بالإضافة إلى القدرة على تحديث خصائص عنصر معين دون تشغيل إعادة عرض كامل للمشهد. تغطي المكتبة مجموعة واسعة من قدرات التصميم البصري والتكوين، بما في ذلك تطبيق التدرجات، والظلال، والزوايا المستديرة. ويوفر محرك تخطيط قائماً على القوالب مصمماً لإنشاء رسومات تعتمد على البيانات، مثل مرئيات وسائل التواصل الاجتماعي وصور البرامج المصغرة.

MyLinearLayout هو إطار عمل لتخطيط واجهة المستخدم بلغة Objective-C ومحرك تخطيط متجاوب لنظام iOS. يعمل كمنسق عرض متعدد الأنماط ينظم عناصر الواجهة باستخدام مزيج من أنماط التخطيط الخطي، والنسبي، والشبكي. تجلب المكتبة سلوك CSS flexbox والعناصر العائمة إلى طرق عرض iOS لتوزيع المساحة الديناميكي. وتتضمن نظاماً مخصصاً لاتجاهات اللغات من اليمين إلى اليسار، مما يوفر انعكاساً تلقائياً لعناصر الواجهة لدعم التخطيطات المترجمة. يغطي إطار العمل مجموعة واسعة من استراتيجيات الترتيب، بما في ذلك التفاف العناصر القائم على التدفق، وتكديس طرق العرض القائم على الإطار، والتنظيم في جداول وشبكات. كما يدعم الترتيبات العضوية عبر محاذاة طرق العرض القائمة على المسار ويوفر فئات حجم تكيفية لتناسب أحجام واتجاهات شاشات الأجهزة المختلفة.

Melt UI هي مكتبة واجهة مستخدم (UI) بدون نمط (headless) لـ Svelte توفر مجموعة من منشئي المكونات التي يمكن الوصول إليها. تعمل كإطار عمل للمكونات وأداة لإدارة الحالة، حيث توفر المنطق والحالة اللازمين لبناء عناصر واجهة تتبع معايير WAI-ARIA وتدعم التنقل عبر لوحة المفاتيح دون فرض أنماط مرئية محددة. تتميز المكتبة بمحرك تحديد موضع للعناصر العائمة يدير وضع النوافذ المنبثقة (popovers)، وتلميحات الأدوات (tooltips)، والقوائم بالنسبة لعناصر التفعيل. يستخدم هذا النظام بوابات (portals) لمنع قص التخطيط ويتضمن منعاً تلقائياً للتجاوز لضمان بقاء العناصر ضمن حدود الشاشة. تغطي مجموعة الأدوات نطاقاً واسعاً من مكونات واجهة المستخدم الوظيفية، بما في ذلك عناصر النماذج مثل القوائم المنسدلة (comboboxes) وأشرطة التمرير، وأنماط التنقل مثل طرق عرض الشجرة وعلامات التبويب، وأدوات التراكب مثل مربعات الحوار. كما توفر واجهات متخصصة لاختيار التاريخ والوقت، بالإضافة إلى مكونات التخطيط مثل الأكورديون وأشرطة الأدوات.

ModernFlyouts is a Windows UI customization tool and system flyout replacer. It provides a set of Fluent Design overlays that replace legacy operating system notifications for volume, brightness, and network connectivity. The project functions as a media control interface and overlay manager, offering extended audio playback tools such as shuffle, repeat, and playback timelines. It uses a visual layer with transparency and contrast support to modify the appearance and behavior of system-level overlays. The software includes capabilities for flyout appearance and behavior management, allowing

This project is a comprehensive design system framework and component library built for React. It provides a suite of modular, accessible, and themeable interface elements designed to maintain a unified visual language and brand alignment across complex web applications. By encapsulating interaction logic and styling within individual components, it enables developers to build consistent, responsive interfaces through declarative composition. The library distinguishes itself by prioritizing inclusive user experiences through built-in accessibility management, including standardized keyboard n