Awesome GitHub RepositoriesData Visualization Libraries

use-gesture is a JavaScript gesture manager and interaction tool designed to detect and process user input patterns. It functions as a React gesture hook library and a general utility for tracking screen coordinates and movement patterns to drive interactive component behaviors. The library specializes in capturing complex mouse and touch interactions, including dragging, pinching, swiping, and scrolling. It provides a system for implementing drag and drop functionality and pinch-to-zoom interactions. The tool covers the development of interactive UI components by normalizing diverse input e

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

Rebass is a React design system library that provides a collection of theme-driven, responsive UI primitives. It functions as a theme-based layout engine, using a set of stateless components to standardize spacing, typography, and colors across a user interface. The library distinguishes itself by mapping style properties to a central design theme through a styled-system approach. This allows for responsive style mapping where components automatically adapt their appearance based on screen size and provides the ability to swap underlying HTML elements while preserving styling logic to maintai

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

هذا المشروع عبارة عن قالب صفحة هبوط Next.js ومجموعة أدوات واجهة مستخدم React مصممة لعرض منتجات البرمجيات والمشاريع مفتوحة المصدر. يعمل كأساس لموقع تسويق مهني وقالب موقع Tailwind CSS لبناء واجهات ويب حديثة. يوفر إطار العمل تخطيطات ومكونات متخصصة لعروض المشاريع مفتوحة المصدر، وصفحات هبوط SaaS، ولوحات تحكم المسؤول. يتضمن مجموعة من المكونات المتجاوبة وأدوات التنسيق التي تسمح بتخصيص التصميم المرئي للألوان والخطوط والتخطيطات. يغطي سطح القدرة مجموعة متنوعة من عناصر واجهة المستخدم، بما في ذلك الرسوم المتحركة القائمة على التمرير، ومخططات تصور البيانات، والمكونات التفاعلية، ودوائر المحتوى. تدعم البنية العرض من جانب الخادم، والتوجيه القائم على الملفات، وخط أنابيب محتوى قائم على markdown لفصل المحتوى عن منطق التطبيق.

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

Gestalt هي مكتبة مكونات واجهة مستخدم React آمنة من حيث النوع ونظام تصميم. توفر مجموعة من عناصر الواجهة القابلة لإعادة الاستخدام ورموز التصميم التي تتبع معايير الوصول الدولية لضمان سهولة الاستخدام للأشخاص ذوي الاحتياجات المتنوعة. يتضمن إطار العمل نظام تخطيط ويب متجاوب مع نقاط توقف محددة وحاويات شبكة تتكيف مع واجهات أجهزة سطح المكتب والهواتف المحمولة والأجهزة اللوحية. ويتميز بمجموعة مكونات دولية تدعم لغات متعددة، وأنظمة ألوان إقليمية، واتجاهات نص من اليمين إلى اليسار. تغطي المكتبة نطاقاً واسعاً من إمكانيات الواجهة، بما في ذلك شاشات الشبكة المرنة و masonry مع التخيل (virtualization) للرسم عالي الأداء، وعناصر النماذج الشاملة، وأنظمة التنقل. كما توفر أدوات لاتصال حالة النظام من خلال التنبيهات واللافتات، والتراكبات السياقية مثل النوافذ المنبثقة (modals) والقوائم المنبثقة (popovers)، وتصورات البيانات التي يمكن الوصول إليها للمقاييس والاتجاهات. يستخدم النظام تعريفات TypeScript الرسمية لضمان سلامة البيانات ومنع أخطاء وقت التشغيل أثناء التطوير.

A collection of JetBrains Web UI components

React components and demo for the Tabler UI theme.

A collection of essential UI components written with React.

React components for easier customization and smooth development flow.

React Provider Component to add a smooth scroll effect 😍