Awesome GitHub RepositoriesReact UI Component Libraries

Arco Design هي مكتبة مكونات واجهة مستخدم React وإطار عمل نظام تصميم يُستخدم لبناء واجهات ويب احترافية. توفر مجموعة من العناصر البصرية والتخطيطات المبنية مسبقاً والمصممة للحفاظ على لغة تصميم متسقة عبر التطبيقات. يتميز النظام بمحرك سمات يعتمد على الرموز يستخدم متغيرات تصميم هرمية ومتغيرات CSS لتمكين تخصيص بصري دقيق. يسمح هذا بتعديل الأنماط على مستوى العالم والمكونات من خلال محرر سمات أو محمل مخصص لمحاذاة الواجهة مع هويات تجارية محددة. يدعم إطار العمل تطوير واجهة المستخدم للمؤسسات من خلال توفير أدوات لإدارة نظام التصميم ومستودع مركزي لتخزين وتوزيع مكونات الأعمال القابلة لإعادة الاستخدام. تسهل هذه الإمكانيات تجميع التخطيطات الوظيفية ومشاركة وحدات الواجهة المخصصة عبر مشاريع متعددة.

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

create-react-library is a command-line generator and development environment designed for creating reusable React component libraries. It scaffolds the necessary project structure and build pipelines required to develop, bundle, and publish JavaScript modules to a registry. The tool provides a development loop that links the library source directory to a companion example application, enabling real-time updates and live previews. It also includes a deployment pipeline that transforms example applications into production builds for hosting as public documentation. The build system manages mul

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

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

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

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

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

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

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

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

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

This project is a plugin framework for the Draft.js rich text editor, providing a system to add custom behaviors, decorators, and keyboard shortcuts. It functions as a toolkit for extending the editor with advanced formatting and interactive elements, while also providing a React UI component library for managing toolbars and popups. The framework is distinguished by its specialized support for social mention systems, enabling the detection and formatting of hashtags and user mentions as interactive entities via autocomplete triggers. It also includes a comprehensive suite of rich media exten

InstantSearch is a JavaScript search framework and UI library designed for building instant search and discovery interfaces using the Algolia API. It provides a toolkit for implementing search logic, state synchronization, and result rendering across various environments, including dedicated component libraries for React and Vue.js. The framework decouples search data processing from the UI layer through a connector-based logic abstraction and a provider pattern for state distribution. This allows developers to build custom search behaviors by transforming connectors into hooks and assembling

Airframe-react هي مكتبة مكونات واجهة مستخدم Bootstrap ومجموعة أدوات أساسية لبناء لوحات تحكم الإدارة وواجهات الإدارة القائمة على React. توفر أساس تطوير مهيأ مسبقاً ومجموعة من عناصر الواجهة الجاهزة للإنتاج لتجميع شاشات تطبيقات متسقة. يتضمن المشروع قوالب ويب متجاوبة وتخطيطات صفحات مصممة مسبقاً تتكيف تلقائياً مع شاشات سطح المكتب والأجهزة اللوحية والهواتف المحمولة. يتيح إنشاء لوحات إدارية من خلال مجموعة من تنويعات التخطيط الهيكلي ومكتبة من الصفحات الجاهزة. تغطي مجموعة الأدوات سقالات التطبيق والنماذج الأولية السريعة لواجهة المستخدم، بما في ذلك إدارة سمات الواجهة الأمامية للتبديل بين الأنماط البصرية في وقت التشغيل. كما تدعم تعيين التنقل القائم على المسارات لربط أشرطة جانبية وأشرطة تنقل محددة بمسارات التطبيق.

This project is a React UI component library and design system framework. It provides a collection of reusable interface elements and an accessible component toolkit designed to meet web accessibility standards and responsive design requirements. The framework enforces visual uniformity through a design system that uses centralized design tokens for colors, spacing, and typography. It includes a standardized SVG icon set to provide consistent visual cues and markers across user interfaces. The library covers the implementation of design systems through token-based styling and the development

This project is a React component library and web UI design system designed for creating interactive web interfaces. It functions as a responsive frontend framework that provides a collection of modular building blocks to ensure visual consistency across different application pages and devices. The system utilizes a CSS-in-JS styling framework that generates and injects styles at runtime through a centralized property injection system. This approach allows for the implementation of a theme-driven architecture where layouts and color themes automatically adjust based on screen size and user pr

React95 is a React component library and retro UI framework designed to replicate the visual aesthetic and interaction patterns of classic nineties desktop operating systems. It provides a collection of reusable user interface elements and a nostalgic interface library for constructing web layouts that mimic the windowing behavior of vintage computer systems. The project functions as a CSS-in-JS design system, using a centralized set of visual tokens to ensure consistent retro styling without the need for external stylesheets. It operates as a frontend design system that provides the necessar

react-calendar is a customizable date grid and picker for React applications. It provides an interactive interface for selecting single or multiple dates and navigating between months and years. The component uses browser internationalization APIs to format months and days, enabling multilingual date formatting for different global regions. It allows for external customization through prop-driven render overrides to replace default date cell displays. The library handles the underlying date calculations and state-driven navigation required for scheduling interfaces and date-based grids.

This project is a React-based rich text editor designed for authoring and managing markdown documents through a visual interface. It functions as a modular framework that renders markdown in real-time, allowing users to create structured content without manual syntax entry. The editor is built on a plugin-based architecture that enables developers to extend functionality while maintaining minimal application bundle sizes. It provides a comprehensive command interface for programmatic content manipulation and utilizes reactive state management to ensure the visual editing surface remains synch