Awesome GitHub RepositoriesComponent Composition Patterns

This project is a utility-first component library that provides a comprehensive suite of pre-styled, reusable interface elements. It functions as a build-time engine that generates design-system-compliant styles by mapping semantic tokens to standard HTML elements and utility classes. By compiling all component styles into static CSS at build time, the library eliminates the need for client-side style calculation, ensuring efficient performance. The library distinguishes itself through a configuration-driven architecture that manages color palettes and visual styles, enabling dynamic switchin

Dioxus is a cross-platform development framework designed for building native desktop, mobile, and web applications from a single codebase. It utilizes a declarative component model and macro-powered syntax to define reusable interface elements, which are then rendered as native widgets or web elements. At its core, the framework employs a signal-based reactivity system that tracks state dependencies to trigger granular updates, ensuring efficient interface performance without re-rendering the entire application tree. The framework distinguishes itself through a unified full-stack runtime tha

Bulletproof React is an architectural guide and project boilerplate designed to standardize the development of large-scale, maintainable frontend applications. It provides a set of structural principles and organizational strategies that enforce a strict separation of concerns, ensuring that codebases remain manageable as they grow in complexity over time. The project distinguishes itself by promoting a modular design that groups related logic, components, and services into dedicated feature folders. It utilizes a composition-based approach to build user interfaces and implements a dependency

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

Framework7 is a mobile user interface framework and single-page application system designed to build responsive web applications with native iOS and Android appearances. It provides a comprehensive library of pre-styled components and a layout engine to create native-style user interfaces across multiple platforms. The framework utilizes a platform-aware theming system that adapts visual styles and color schemes based on detected device settings. It incorporates native mobile behaviors through a dedicated UI kit, including specialized interaction patterns such as pull-to-refresh and swipeable

Recompose is a suite of toolsets for implementing higher-order component composition, context extraction, render optimization, and external state integration. It provides a library of utilities to wrap components in reusable logic and behavioral layers, allowing developers to chain functional wrappers and reduce nesting within a component tree. The project focuses on the composition of functional wrappers to inject properties and behavior into components. It includes a set of helpers for extracting values from component context and passing them as direct properties, as well as tools for integ

Ant Design Mobile is a mobile UI component library and design system built for React. It provides a collection of pre-styled interface elements and standardized UI blocks used to create consistent, responsive user interfaces for mobile web applications. The framework focuses on mobile web design and frontend interface engineering, providing tools to implement interaction patterns tailored for touch-based browsing. It ensures a uniform look and feel across different mobile browsers and handheld device screens. The library incorporates responsive layout systems and CSS-variable-based theming.

Base Web is a React UI component library and design system implementation. It provides a collection of reusable interface elements and a responsive web framework designed to enforce a consistent visual language and layout across digital products. The project focuses on enterprise design systems and responsive web design, offering tools that automatically adapt user interfaces to fit various screen sizes and devices. It incorporates accessible interface design to ensure components follow standards for users with disabilities. The library utilizes a theme-based design token system and a compos

react-native-reusables is a cross-platform mobile UI library and an accessible component kit used to build consistent interfaces across different screen sizes. It functions as a Tailwind CSS component library, providing pre-styled interface elements that utilize utility classes for styling and layout. The project enables cross-platform UI development for iOS and Android through a shared set of reusable visual components. It supports mobile interface prototyping and the creation of cohesive design systems by utilizing standardized, themeable interface elements to maintain uniform branding. Th

PrimeReact is a comprehensive UI component library for building interactive user interfaces with React. It provides an accessible component suite, a form input framework, and a data visualization toolkit designed to meet accessibility standards through built-in keyboard navigation and focus management. The library features a themed design system that allows for visual customization via pre-defined skin sets or an unstyled mode. This unstyled mode decouples component behavior and accessibility logic from the presentation layer, enabling the implementation of custom corporate design systems. C

metrics-graphics is a data visualization library and declarative graphics framework designed to create principled data graphics and layouts. It functions as a statistical graphics engine that maps raw data to geometric shapes and structured objects to render complex, data-driven layouts. The toolkit specializes in rendering time-series data through line charts and scatterplots using a consistent layout system. It also provides capabilities for statistical distribution mapping, including the creation of rug plots to represent one-dimensional data density. The system covers a broad surface of

This project is a React Native UI library and mobile component framework designed for building consistent, themed mobile applications. It provides a collection of reusable user interface components and layout tools, functioning as a cross-platform design system to maintain visual uniformity across different mobile platforms. The toolkit distinguishes itself through a themed UI approach, utilizing global design foundations for typography, color palettes, and spacing. It allows for dynamic theme configuration and the use of style presets to ensure standardized branding across an entire project.

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

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

Chakra UI Vue هي مكتبة مكونات لنظام Vue.js توفر مجموعة من اللبنات الأساسية المعيارية والقابلة للوصول لبناء واجهات المستخدم. تعمل كموفر لنظام التصميم، مما يتيح للمطورين إدارة رموز التصميم العالمية (design tokens) والاتساق البصري عبر التطبيقات المعقدة من خلال موفر سمات مركزي. يتميز إطار العمل بدمج منطق إمكانية الوصول وسمات WAI-ARIA مباشرة في مكوناته الأساسية، مما يضمن التعامل مع التنقل عبر لوحة المفاتيح وتوافق قارئات الشاشة بشكل افتراضي. يستخدم نهج تصميم تصريحي حيث يتم تطبيق خصائص التخطيط والتصميم مباشرة على المكونات عبر الـ props، مما يقلل الحاجة إلى ملفات أنماط خارجية. تتضمن المكتبة دعماً مدمجاً لتطبيع الأنماط عبر المتصفحات والتبديل التلقائي لنظام الألوان، مما يسمح بدمج سلس للوضع الفاتح والداكن. تسهل هذه الأدوات بناء أنماط واجهة مخصصة من خلال تركيب عناصر قابلة لإعادة الاستخدام تلتزم بلغة تصميم موحدة.