Awesome GitHub RepositoriesReact UI Component Libraries

Arco Design est une bibliothèque de composants UI React et un framework de système de design utilisé pour construire des interfaces web professionnelles. Il fournit une collection d'éléments visuels et de mises en page pré-construits conçus pour maintenir un langage de design cohérent à travers les applications. Le système dispose d'un moteur de thématisation basé sur des jetons (tokens) qui utilise des variables de design hiérarchiques et des variables CSS pour permettre une personnalisation visuelle granulaire. Cela permet la modification des styles globaux et au niveau des composants via un éditeur de thème dédié ou un loader pour aligner l'interface avec des identités de marque spécifiques. Le framework prend en charge le développement d'UI d'entreprise en fournissant des outils pour la gestion de système de design et un dépôt centralisé pour stocker et distribuer des composants métier réutilisables. Ces capacités facilitent l'assemblage de mises en page fonctionnelles et le partage de modules d'interface personnalisés à travers plusieurs projets.

Ce projet est un modèle administratif basé sur React et un kit UI conçu pour construire des tableaux de bord. Il fournit une collection complète de mises en page pré-stylisées, une bibliothèque de composants accessible et un framework UI basé sur Sass pour créer des interfaces administratives. Le modèle est spécifiquement structuré comme un projet optimisé pour l'IA, utilisant des modèles de codage et une organisation conçus pour aider les assistants IA à générer du code React cohérent et prêt pour la production. Il dispose d'un système de style flexible utilisant des variables Sass et des propriétés personnalisées CSS pour prendre en charge des thèmes clairs et sombres personnalisables. Le kit couvre un large éventail de capacités d'interface, y compris des widgets de visualisation de données, des tableaux interactifs avec tri et pagination, et des éléments de formulaire complexes comme des assistants multi-étapes. Il inclut des systèmes de navigation de haut niveau tels que des barres latérales et des fils d'ariane, ainsi que des composants structurels comme des grilles réactives, des boîtes de dialogue modales et des interfaces de calendrier accessibles.

create-react-library est un générateur en ligne de commande et un environnement de développement conçu pour créer des bibliothèques de composants React réutilisables. Il échafaude la structure de projet nécessaire et les pipelines de build requis pour développer, bundler et publier des modules JavaScript vers un registre. L'outil fournit une boucle de développement qui lie le répertoire source de la bibliothèque à une application d'exemple compagnon, permettant des mises à jour en temps réel et des prévisualisations en direct. Il inclut également un pipeline de déploiement qui transforme les applications d'exemple en builds de production pour l'hébergement en tant que documentation publique. Le système de build gère le bundling de modules multi-formats pour CommonJS et les modules ES, incluant la génération de sourcemaps. Il gère en outre la gestion des dépendances de pairs pour garantir que les dépendances partagées sont externalisées et non bundlées dans le package final.

Ce projet est un système de conception d'entreprise et un framework d'interface web qui fournit une bibliothèque de composants React pour construire des expériences utilisateur cohérentes. Il sert de pont de flux de travail conception-vers-code, synchronisant les outils de conception de produits avec l'implémentation frontend pour accélérer la vitesse de développement. Le framework se concentre sur la synchronisation conception-vers-code et la construction de systèmes de conception d'entreprise. Il permet la standardisation des composants visuels et la composition d'écrans web et mobiles complexes en utilisant des éléments d'interface et des modèles de mise en page unifiés. La bibliothèque implémente un système de jetons de conception et un mappage de style multiplateforme pour maintenir la fidélité visuelle entre les maquettes de conception et le code de production. Elle utilise une approche pilotée par la configuration et des principes de conception atomique pour organiser des éléments indépendants en mises en page plus grandes.

Ce projet est un template de landing page Next.js et un kit UI React conçu pour présenter des produits logiciels et des projets open source. Il sert de fondation de site web marketing professionnel et de boilerplate de site web Tailwind CSS pour construire des interfaces web modernes. Le framework fournit des mises en page et des composants spécialisés pour les vitrines de projets open source, les landing pages SaaS et les tableaux de bord d'administration. Il inclut une collection de composants responsives et d'utilitaires de style qui permettent la personnalisation du design visuel des couleurs, polices et mises en page. La surface de capacité couvre une variété d'éléments UI, incluant des animations basées sur le scroll, des graphiques de visualisation de données, des composants interactifs et des carrousels de contenu. L'architecture prend en charge le rendu côté serveur, le routage basé sur les fichiers et un pipeline de contenu basé sur Markdown pour découpler le contenu de la logique d'application.

This project is a React UI component library and frontend UI kit designed to provide a collection of pre-styled user interface elements. It serves as a design system framework, offering standardized visual patterns to ensure a cohesive look and feel across different screens. The library focuses on design system implementation and frontend component architecture, allowing for the creation of modern websites and applications. It integrates directly into a React application workflow to accelerate the development of complex web layouts. The system utilizes a component-based abstraction and compo

Geist UI is a design system framework and React UI component library. It provides a collection of pre-styled, accessible components and design primitives used to maintain visual consistency across websites and applications. The framework includes a themed UI provider that manages application styles through a centralized system, enabling the switching of visual modes such as light and dark themes. It also features a responsive CSS grid system for organizing content into rows and columns that adapt to various screen sizes. The library covers accessible UI development using compliant markup and

Ce projet est une ressource d'apprentissage React composée de fichiers de démarrage et de projets de référence. Elle fournit une collection de modèles de projets React full stack et d'exemples de bibliothèques de composants pour démontrer la construction d'interfaces utilisateur interactives et d'applications monopages. La ressource inclut un guide de gestion de l'état couvrant l'utilisation des hooks, des réducteurs et des fournisseurs de contexte. Elle propose des implémentations pratiques pour gérer l'état des composants locaux, synchroniser les données d'application globales et gérer les transitions d'état complexes. Le matériel couvre le développement web full stack, y compris le rendu côté serveur et l'utilisation d'actions serveur pour la gestion des formulaires. Il aborde également le routage côté client, la composition modulaire de l'interface utilisateur et l'intégration d'applications frontend avec des bases de données et des services d'authentification externes.

ChatUI is a React conversational UI library and framework designed for building messaging interfaces. It provides a set of components for creating conversation flows, including message bubbles, input areas, and structured message hierarchies. The library distinguishes itself through specialized AI agent interface features, such as the visualization of an agent's reasoning process and simulated typing animations that render text character-by-character. It also includes a system of pre-designed conversational card templates for rendering banners, selection lists, and questionnaires within a cha

Gestalt est une bibliothèque de composants d'interface utilisateur React typée et un système de conception. Elle fournit une collection d'éléments d'interface réutilisables et de jetons de conception qui suivent les normes d'accessibilité internationales pour assurer la convivialité pour les personnes ayant des besoins divers. Le framework inclut un système de mise en page web responsive avec des points de rupture définis et des conteneurs de grille qui adaptent les interfaces pour les appareils de bureau, mobiles et tablettes. Il dispose d'une suite de composants internationalisée qui prend en charge plusieurs langues, des schémas de couleurs régionaux et des orientations de texte de droite à gauche. La bibliothèque couvre une large gamme de capacités d'interface, y compris des affichages en grille et en maçonnerie flexibles avec virtualisation pour un rendu haute performance, des éléments de formulaire complets et des systèmes de navigation. Elle fournit également des outils pour la communication de l'état du système via des alertes et des bannières, des superpositions contextuelles comme des modales et des popovers, et des visualisations de données accessibles pour les métriques et les tendances. Le système utilise des déclarations TypeScript officielles pour assurer l'intégrité des données et prévenir les erreurs d'exécution pendant le développement.

Elemental est un système de conception basé sur des composants et un framework d'interface utilisateur React. Il fournit une collection de composants d'interface pré-stylisés et de modèles CSS utilisés pour construire des interfaces utilisateur cohérentes et des conceptions de mise en page pour les applications web. La bibliothèque fonctionne comme une bibliothèque d'interface utilisateur CSS personnalisable, permettant l'implémentation de systèmes de conception personnalisés en mappant des jetons de conception et des feuilles de style vers des éléments réutilisables. Elle intègre le rendu d'icônes vectorielles pour intégrer des glyphes graphiques scalables directement au sein des composants d'interface. Le framework prend en charge la composition de mises en page complexes en utilisant des éléments pré-faits tels que des boutons et des modales pour faciliter le prototypage d'interface. Il maintient une cohérence visuelle grâce à l'héritage de style piloté par le thème et à la configuration basée sur des jetons.

winjs est une boîte à outils d'interface utilisateur de navigateur et une bibliothèque de composants JavaScript conçue pour construire des applications web. Elle fournit un ensemble de composants et d'utilitaires haute performance avec une prise en charge native du tactile, du clavier et de l'accessibilité. Le projet propose un normalisateur d'événements multi-navigateurs qui crée des événements de pointeur et de focus synthétiques pour assurer un comportement d'entrée cohérent à travers différents navigateurs. Il inclut également un framework de localisation web pour gérer les traductions multilingues et les formats régionaux en utilisant des fichiers de ressources clé-valeur. La boîte à outils couvre un large éventail de capacités, incluant un pipeline d'assets frontend pour compiler le code source, une synchronisation de l'interface utilisateur pilotée par l'état pour optimiser les mises à jour du DOM, et un système de style complet pour la typographie, les contrôles de formulaire et les couleurs d'accentuation dynamiques. Elle fournit également des utilitaires pour la gestion globale des événements, les animations de transition d'interface et la coordination des éléments d'interface dismissibles.

Ce projet est un framework de plugins pour l'éditeur de texte riche Draft.js, fournissant un système pour ajouter des comportements personnalisés, des décorateurs et des raccourcis clavier. Il fonctionne comme une boîte à outils pour étendre l'éditeur avec un formatage avancé et des éléments interactifs, tout en fournissant également une bibliothèque de composants React UI pour gérer les barres d'outils et les popups. Le framework se distingue par son support spécialisé pour les systèmes de mention sociale, permettant la détection et le formatage des hashtags et des mentions d'utilisateurs en tant qu'entités interactives via des déclencheurs d'autocomplétion. Il inclut également une suite complète d'extensions de médias riches pour intégrer et manipuler des images, vidéos, emojis et autocollants directement dans le flux de texte. Les capacités étendues incluent l'implémentation de barres d'outils contextuelles — telles que des menus flottants, statiques ou alignés sur le côté — et la capacité de gérer l'agencement du contenu via des interactions de glisser-déposer et le redimensionnement de blocs. Le système couvre également des outils de gestion de contenu comme les métriques de document en temps réel et la gestion de l'historique pour les opérations d'annulation et de rétablissement. Le projet est écrit en TypeScript et fournit une architecture extensible pour intégrer des décorateurs personnalisés et des pipelines de transformation d'état.

InstantSearch est un framework de recherche JavaScript et une bibliothèque UI conçue pour construire des interfaces de recherche et de découverte instantanées en utilisant l'API Algolia. Il fournit une boîte à outils pour implémenter la logique de recherche, la synchronisation d'état et le rendu des résultats dans divers environnements, incluant des bibliothèques de composants dédiées pour React et Vue.js. Le framework découple le traitement des données de recherche de la couche UI grâce à une abstraction de logique basée sur des connecteurs et un modèle de fournisseur pour la distribution d'état. Cela permet aux développeurs de construire des comportements de recherche personnalisés en transformant les connecteurs en hooks et en assemblant des interfaces à l'aide d'un système de widgets indépendants et composables. La bibliothèque couvre un large éventail de domaines fonctionnels, notamment le rendu côté serveur pour l'optimisation des moteurs de recherche, la synchronisation d'URL pour la persistance d'état et l'analyse des interactions des utilisateurs. Elle prend également en charge des capacités de découverte avancées telles que le reranking basé sur la conversion, les parcours utilisateur personnalisés et la prédiction d'intention basée sur le machine learning.

Airframe-react is a Bootstrap UI component library and starter kit for building React-based admin dashboards and management interfaces. It provides a preconfigured development foundation and a collection of production-ready interface elements to assemble consistent application screens. The project includes responsive web templates and pre-designed page layouts that automatically adapt content for desktop, tablet, and mobile screens. It enables the creation of administrative panels through a set of structural layout variations and a library of ready-made pages. The toolkit covers application

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