Awesome GitHub RepositoriesReact UI Component Libraries

Arco Design is a React UI component library and design system framework used to build professional web interfaces. It provides a collection of pre-built visual elements and layouts designed to maintain a consistent design language across applications. The system features a token-based theming engine that utilizes hierarchical design variables and CSS variables to enable granular visual customization. This allows for the modification of global and component-level styles through a dedicated theme editor or loader to align the interface with specific brand identities. The framework supports ent

Dieses Projekt ist ein React-basiertes Admin-Template und UI-Kit, das für den Aufbau von Dashboards entwickelt wurde. Es bietet eine umfassende Sammlung vorgestylter Layouts, eine zugängliche Komponentenbibliothek und ein Sass-basiertes UI-Framework für die Erstellung administrativer Interfaces. Das Template ist spezifisch als KI-optimiertes Projekt strukturiert und nutzt Coding-Muster und Organisation, die darauf ausgelegt sind, KI-Assistenten bei der Generierung konsistenter, produktionsreifer React-Codes zu unterstützen. Es verfügt über ein flexibles Styling-System unter Verwendung von Sass-Variablen und CSS-Custom-Properties, um anpassbare helle und dunkle Themen zu unterstützen. Das Kit deckt ein breites Spektrum an Interface-Funktionen ab, einschließlich Datenvisualisierungs-Widgets, interaktiven Tabellen mit Sortierung und Paginierung sowie komplexen Formularelementen wie Multi-Step-Wizards. Es enthält übergeordnete Navigationssysteme wie Sidebars und Breadcrumbs sowie strukturelle Komponenten wie responsive Grids, modale Dialoge und zugängliche Kalender-Interfaces.

create-react-library ist ein Kommandozeilen-Generator und eine Entwicklungsumgebung für die Erstellung wiederverwendbarer React-Komponentenbibliotheken. Es erstellt die notwendige Projektstruktur und die Build-Pipelines, die erforderlich sind, um JavaScript-Module zu entwickeln, zu bündeln und in einer Registry zu veröffentlichen. Das Tool bietet eine Entwicklungsschleife, die das Quellverzeichnis der Bibliothek mit einer begleitenden Beispielanwendung verknüpft, was Echtzeit-Updates und Live-Vorschauen ermöglicht. Es enthält zudem eine Deployment-Pipeline, die Beispielanwendungen in Produktions-Builds für das Hosting als öffentliche Dokumentation transformiert. Das Build-System verwaltet das Multi-Format-Modul-Bundling für CommonJS- und ES-Module, einschließlich der Generierung von Sourcemaps. Es handhabt zudem das Peer-Dependency-Management, um sicherzustellen, dass geteilte Abhängigkeiten externalisiert und nicht in das finale Paket gebündelt werden.

Dieses Projekt ist ein Enterprise-Designsystem und ein Web-Interface-Framework, das eine React-Komponentenbibliothek für den Aufbau konsistenter Benutzererlebnisse bereitstellt. Es dient als Brücke für den Design-zu-Code-Workflow und synchronisiert Produktdesign-Tools mit der Frontend-Implementierung, um die Entwicklungsgeschwindigkeit zu beschleunigen. Das Framework konzentriert sich auf die Design-zu-Code-Synchronisation und den Aufbau von Enterprise-Designsystemen. Es ermöglicht die Standardisierung visueller Komponenten und die Komposition komplexer Web- und Mobilbildschirme unter Verwendung einheitlicher Schnittstellenelemente und Layoutmuster. Die Bibliothek implementiert ein Design-Token-System und plattformübergreifende Stilzuordnung, um die visuelle Wiedergabetreue zwischen Design-Mocks und Produktionscode aufrechtzuerhalten. Sie nutzt einen konfigurationsgesteuerten Ansatz und atomare Designprinzipien, um unabhängige Elemente in größeren Layouts zu organisieren.

This project is a Next.js landing page template and React UI kit designed for showcasing software products and open source projects. It serves as a professional marketing website foundation and a Tailwind CSS website boilerplate for building modern web interfaces. The framework provides specialized layouts and components for open source project showcases, SaaS landing pages, and admin dashboards. It includes a collection of responsive components and styling utilities that allow for visual design customization of colors, fonts, and layouts. The capability surface covers a variety of UI elemen

Dieses Projekt ist eine React-UI-Komponentenbibliothek und ein Frontend-UI-Kit, das darauf ausgelegt ist, eine Sammlung vorgestylter Benutzeroberflächenelemente bereitzustellen. Es dient als Design-System-Framework und bietet standardisierte visuelle Muster, um ein einheitliches Erscheinungsbild über verschiedene Bildschirme hinweg zu gewährleisten. Die Bibliothek konzentriert sich auf die Implementierung von Design-Systemen und Frontend-Komponentenarchitektur, was die Erstellung moderner Websites und Anwendungen ermöglicht. Sie integriert sich direkt in einen React-Anwendungs-Workflow, um die Entwicklung komplexer Web-Layouts zu beschleunigen. Das System nutzt eine komponentenbasierte Abstraktion und kompositionelles Design, um wiederverwendbare Schnittstellenelemente zu erstellen. Es integriert eine CSS-Variablen-Theme-Engine und Utility-First-Styling, um eine konsistente Designskala und ein visuelles System beizubehalten, während TypeScript-Typdefinitionen für Prop-Sicherheit verwendet werden.

Geist UI ist ein Design-System-Framework und eine React-UI-Komponentenbibliothek. Sie bietet eine Sammlung vorgestylter, barrierefreier Komponenten und Design-Primitive, die verwendet werden, um die visuelle Konsistenz über Websites und Anwendungen hinweg zu wahren. Das Framework enthält einen themenbasierten UI-Provider, der Anwendungsstile über ein zentrales System verwaltet und das Umschalten visueller Modi wie helle und dunkle Designs ermöglicht. Es verfügt zudem über ein responsives CSS-Grid-System zur Organisation von Inhalten in Zeilen und Spalten, die sich an verschiedene Bildschirmgrößen anpassen. Die Bibliothek deckt die barrierefreie UI-Entwicklung unter Verwendung konformen Markups ab und bietet Tools für die Implementierung responsiver Layouts und modernes Web-Interface-Design.

Dieses Projekt ist eine React-Lernressource, die aus Starter-Dateien und Referenzprojekten besteht. Sie bietet eine Sammlung von Full-Stack-React-Projektvorlagen und Komponentenbibliotheksbeispielen, um die Konstruktion interaktiver Benutzeroberflächen und Single-Page-Anwendungen zu demonstrieren. Die Ressource enthält einen Leitfaden zum State-Management, der die Verwendung von Hooks, Reducern und Context-Providern abdeckt. Sie bietet praktische Implementierungen zur Verwaltung des lokalen Komponenten-States, zur Synchronisierung globaler Anwendungsdaten und zur Handhabung komplexer Zustandsübergänge. Das Material deckt Full-Stack-Webentwicklung ab, einschließlich serverseitigem Rendering und der Verwendung von Server-Actions für die Formularverarbeitung. Es adressiert zudem clientseitiges Routing, modulare UI-Komposition und die Integration von Frontend-Anwendungen mit externen Datenbanken und Authentifizierungsdiensten.

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 ist eine typsichere React-UI-Komponentenbibliothek und ein Designsystem. Es bietet eine Sammlung wiederverwendbarer Schnittstellenelemente und Design-Tokens, die internationalen Barrierefreiheitsstandards folgen, um die Nutzbarkeit für Menschen mit unterschiedlichen Bedürfnissen sicherzustellen. Das Framework enthält ein responsives Web-Layout-System mit definierten Breakpoints und Grid-Containern, die Schnittstellen für Desktop-, Mobil- und Tablet-Geräte anpassen. Es verfügt über eine internationalisierte Komponentensuite, die mehrere Sprachen, regionale Farbschemata und Textausrichtungen von rechts nach links unterstützt. Die Bibliothek deckt ein breites Spektrum an Schnittstellenfunktionen ab, einschließlich flexibler Grid- und Masonry-Anzeigen mit Virtualisierung für Hochleistungs-Rendering, umfassender Formularelemente und Navigationssysteme. Sie bietet zudem Tools für die Kommunikation des Systemstatus durch Warnungen und Banner, kontextbezogene Overlays wie Modals und Popovers sowie barrierefreie Datenvisualisierungen für Metriken und Trends. Das System verwendet offizielle TypeScript-Deklarationen, um die Datenintegrität sicherzustellen und Laufzeitfehler während der Entwicklung zu verhindern.

Elemental ist ein komponentenbasiertes Design-System und React-UI-Framework. Es bietet eine Sammlung vorformatierter Interface-Komponenten und CSS-Muster, die zum Aufbau konsistenter Benutzeroberflächen und Layout-Designs für Webanwendungen verwendet werden. Die Bibliothek fungiert als anpassbare CSS-UI-Bibliothek, die die Implementierung eigener Design-Systeme durch das Mapping von Design-Tokens und Stylesheets auf wiederverwendbare Elemente ermöglicht. Sie integriert Vektor-Icon-Rendering, um skalierbare grafische Glyphen direkt in Interface-Komponenten einzubetten. Das Framework unterstützt die Komposition komplexer Layouts unter Verwendung vorgefertigter Elemente wie Buttons und Modals, um das Interface-Prototyping zu erleichtern. Es wahrt die visuelle Konsistenz durch themengesteuerte Style-Vererbung und tokenbasierte Konfiguration.

winjs ist ein Browser-UI-Toolkit und eine JavaScript-Komponentenbibliothek für den Aufbau von Webanwendungen. Es bietet eine Reihe von High-Performance-Komponenten und Utilities mit nativer Unterstützung für Touch, Tastatur und Barrierefreiheit. Das Projekt verfügt über einen Cross-Browser-Event-Normalizer, der synthetische Pointer- und Focus-Events erstellt, um ein konsistentes Eingabeverhalten über verschiedene Browser hinweg sicherzustellen. Es enthält zudem ein Web-Lokalisierungs-Framework für das Management von mehrsprachigen Übersetzungen und regionalen Formaten mittels Key-Value-Ressourcendateien. Das Toolkit deckt ein breites Spektrum an Funktionen ab, einschließlich einer Frontend-Asset-Pipeline für die Kompilierung von Quellcode, zustandsgesteuerter UI-Synchronisierung zur Optimierung von DOM-Updates und einem umfassenden Styling-System für Typografie, Formularsteuerelemente und dynamische Akzentfarben. Es bietet zudem Utilities für globales Event-Management, UI-Übergangsanimationen und die Koordination schließbarer Interface-Elemente.

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 ist ein JavaScript-Such-Framework und eine UI-Bibliothek, die für den Aufbau von Instant-Search- und Discovery-Interfaces mithilfe der Algolia-API entwickelt wurde. Es bietet ein Toolkit zur Implementierung von Suchlogik, Zustands-Synchronisation und Ergebnis-Rendering über verschiedene Umgebungen hinweg, einschließlich dedizierter Komponentenbibliotheken für React und Vue.js. Das Framework entkoppelt die Suchdatenverarbeitung von der UI-Ebene durch eine Connector-basierte Logik-Abstraktion und ein Provider-Muster für die Zustandsverteilung. Dies ermöglicht es Entwicklern, benutzerdefinierte Suchverhalten zu erstellen, indem sie Connectors in Hooks transformieren und Interfaces mithilfe eines Systems unabhängiger, komponierbarer Widgets zusammenstellen. Die Bibliothek deckt ein breites Spektrum funktionaler Bereiche ab, einschließlich serverseitigem Rendering für Suchmaschinenoptimierung, URL-Synchronisation für Zustands-Persistenz und Analyse von Benutzerinteraktionen. Sie unterstützt zudem fortgeschrittene Discovery-Funktionen wie konversionsbasiertes Reranking, personalisierte User-Journeys und KI-basierte Intent-Vorhersage.

Airframe-react ist eine Bootstrap-UI-Komponentenbibliothek und ein Starter-Kit für den Aufbau von React-basierten Admin-Dashboards und Management-Schnittstellen. Es bietet eine vorkonfigurierte Entwicklungsgrundlage und eine Sammlung produktionsreifer Interface-Elemente, um konsistente Anwendungsbildschirme zusammenzustellen. Das Projekt enthält responsive Web-Templates und vorgefertigte Seitenlayouts, die Inhalte automatisch für Desktop-, Tablet- und Mobilbildschirme anpassen. Es ermöglicht die Erstellung administrativer Panels durch eine Reihe struktureller Layout-Variationen und eine Bibliothek fertiger Seiten. Das Toolkit deckt Anwendungs-Scaffolding und schnelles UI-Prototyping ab, einschließlich Frontend-Theme-Management zum Umschalten visueller Styles zur Laufzeit. Es unterstützt zudem routenbasiertes Navigations-Mapping, um spezifische Sidebars und Navbars mit Anwendungsrouten zu verknüpfen.

Horizon UI Chakra is a comprehensive dashboard template and component library designed for building administrative web applications. It provides a foundational boilerplate that utilizes a modular, component-based architecture to facilitate the rapid construction of complex management interfaces and data visualization panels. The project distinguishes itself by integrating a centralized design system that propagates visual tokens throughout the application, ensuring consistent branding and styling across all interface elements. It supports responsive layouts through fluid grid systems and offe

Beautiful React Diagrams is a component library for building interactive node-based visualizations and flowcharts within React applications. It provides a framework for rendering custom visual schemas where nodes and links are managed through a centralized state, ensuring a single source of truth for complex layouts. The library distinguishes itself through a flexible rendering pattern that allows for the injection of custom user-defined components into node and port placeholders. It enforces structural integrity by validating connections against predefined schemas and provides granular contr

Dieses Projekt ist ein React-basiertes UI-Framework, das als Grundlage für den Aufbau skalierbarer und zugänglicher Web-Schnittstellen dient. Es bietet eine Sammlung vorformatierter Komponenten und Layout-Container, die darauf ausgelegt sind, die visuelle Sprache und das Komponentenverhalten über Anwendungen hinweg zu standardisieren. Die Bibliothek nutzt eine kompositionsbasierte Architektur, die es Entwicklern ermöglicht, zweckgebundene Primitive zu verschachteln, um komplexe Schnittstellenmuster zu konstruieren. Durch die direkte Abbildung dieser Bausteine auf semantische HTML-Elemente und die Verwendung eines Prop-Forwarding-Musters stellt das System sicher, dass Standard-Browserverhalten, Tastaturnavigation und Screenreader-Kompatibilität standardmäßig gewahrt bleiben. Die visuelle Konsistenz wird durch ein zentralisiertes System von Design-Tokens aufrechterhalten, die Typografie, Abstände und Farben regeln. Das Styling wird direkt über Komponentenattribute angewendet, was die Abhängigkeit von externen Stylesheets reduziert und gleichzeitig die Konstruktion responsiver Layouts über verschiedene Bildschirmgrößen hinweg unterstützt.

Dieses Projekt ist eine Sammlung vor-gestylter React-Komponenten für den Aufbau responsiver Messaging-Interfaces und Echtzeit-Chat-Anwendungen. Es fungiert als modulares Toolkit, das es Entwicklern ermöglicht, benutzerdefinierte Chat-Fenster, Nachrichten-Feeds und Eingabefelder innerhalb von Webanwendungen unter Verwendung einer komponentenbasierten Architektur zusammenzustellen. Die Bibliothek zeichnet sich dadurch aus, dass sie eine zentrale Logikschicht für die Verwaltung von Konversationsdaten bereitstellt, einschließlich Benutzerpräsenz, Nachrichtenverlauf und Tipp-Indikatoren. Sie bewältigt die Komplexität der Nachrichtenstrom-Navigation, wie automatisches Scrollen und dynamisches Abrufen des Verlaufs, während sie durch Scoped-Style-Encapsulation visuelle Konsistenz wahrt. Das Toolkit deckt ein breites Spektrum an Interface-Anforderungen ab, einschließlich Rich-Media-Rendering, einklappbarer Anzeigepanels und Tastatur-Event-Management für die Texteingabe. Es nutzt Property-basierte Konfiguration und direkte Elementmanipulation, um sicherzustellen, dass Messaging-Komponenten während der Interaktion responsiv und performant bleiben.

Diese Bibliothek ist ein deklaratives React-Komponenten-Toolkit für den Aufbau interaktiver, knotenbasierter Diagrammoberflächen und Flussdiagramme. Sie bietet die grundlegenden UI-Elemente, die zum Rendern von verschiebbaren Knoten und skalierbaren Vektorgrafikpfaden im Webbrowser erforderlich sind, und ermöglicht so die Erstellung komplexer visueller Editoren und Datenflussdarstellungen. Die Bibliothek zeichnet sich durch eine strikt zustandslose Architektur aus, die auf externes State-Management setzt. Durch die Verwendung eines kontrollierten Eingabemusters und Komponenten-Injection wird die Diagrammlogik von der Datenspeicherung entkoppelt, sodass Entwickler die „Source of Truth“ innerhalb ihres eigenen Anwendungszustands behalten können. Dieser Ansatz stellt sicher, dass jedes visuelle Element, von Knoten und Ports bis hin zur Arbeitsfläche selbst, vollständig an spezifische Designanforderungen angepasst werden kann. Das Toolkit unterstützt eine breite Palette an Interaktionsmöglichkeiten, einschließlich gestenbasierter Navigation zum Schwenken und Zoomen auf der Arbeitsfläche. Es bietet zudem Funktionen zum Zeichnen von Verbindungen zwischen Knoten und enthält einen Read-only-Modus für Szenarien, in denen strukturelle Änderungen eingeschränkt werden müssen. Die Bibliothek wird als Sammlung wiederverwendbarer Komponenten vertrieben, die für die Integration in bestehende React-Projekte konzipiert sind.