Awesome GitHub RepositoriesReact Design System Libraries

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

Arwes is a sci-fi React UI framework and futuristic component library designed for building web interfaces with cyberpunk aesthetics. It provides a thematic web UI toolkit that combines stylized components with an SVG animation engine to create immersive visual identities. The project distinguishes itself through coordinated animation sequences that control the assembly and disassembly of interface elements. It integrates a sensory feedback system that maps user interaction events to synchronized audio clips and manages dynamic backgrounds to enhance the environmental atmosphere. The framewo

EUI ist eine React-UI-Komponentenbibliothek und ein Design-System-Framework. Es bietet eine Sammlung wiederverwendbarer, typisierter Interface-Komponenten und visueller Richtlinien, um eine einheitliche User Experience über Webanwendungs-Layouts hinweg zu gewährleisten. Das Projekt fungiert als themenbasiertes UI-Toolkit, das die Verwaltung visueller Ästhetik und das Umschalten zwischen Hell- und Dunkelmodus ermöglicht. Es integriert eine CSS-in-JS-Styling-Bibliothek zur Definition benutzerdefinierter Styles und Regelsätze für einzelne Anwendungselemente. Das Framework deckt breite Funktionsbereiche ab, darunter die Implementierung von Design-Systemen, benutzerdefiniertes Interface-Styling und UI-Komponententests in gemockten Umgebungen zur Überprüfung der visuellen Korrektheit.

Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for building design systems and interactive user interfaces. It is an accessibility-first toolkit that handles core concerns like ARIA attributes, focus management, and screen reader support automatically, without requiring developer configuration. The library is built as a collection of standalone packages, each managing its own lifecycle and dependencies, enabling granular adoption and tree-shaking. Components use a polymorphic rendering pattern, accepting an as prop to render as

Theme-ui ist ein React-Theme-Framework und CSS-in-JS-Utility für den Aufbau themenfähiger Benutzeroberflächen. Es fungiert als Design-System-Tool, das zentralisierte, einschränkungsbasierte Skalen für Farben, Typografie und Abstände festlegt, um visuelle Konsistenz über Anwendungen hinweg zu gewährleisten. Das Framework zeichnet sich durch eine Array-basierte responsive Kurzschreibweise für Mobile-First-Layouts und einen dedizierten Color-Mode-Manager aus, der mit Browsereinstellungen synchronisiert wird und Benutzerauswahlen beibehält. Es bietet zudem ein System zur Erstellung benannter Style-Varianten, um das Komponenten-Erscheinungsbild über Eigenschaften zu steuern, und bietet Synchronisationsfunktionen, um Theme-Konfigurationen in Figma-Styles zu übersetzen. Das Projekt deckt eine breite Palette an Styling-Funktionen ab, einschließlich globaler CSS-Injektion für Element-Resets, verschachtelter Theme-Overrides via Context und ein Deep-Merge-Konfigurationssystem zur Erweiterung von Design-Presets. Es enthält zudem eine Reihe themenfähiger Layout-Komponenten, wie responsive Grids und standardisierte Formulareingaben. Ein dediziertes Plugin ist für die Integration des Design-Systems in Gatsby-Sites verfügbar.

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.

Chakra Templates ist eine Sammlung vorgefertigter, responsiver Interface-Muster, die für die Integration in React-Anwendungen konzipiert sind. Sie fungiert als Frontend-Design-System-Ressource und bietet modulare UI-Bausteine, die es Entwicklern ermöglichen, konsistente Styling- und Layout-Standards über mehrere Anwendungsbildschirme hinweg beizubehalten. Das Repository stellt den Quellcode für jedes Template bereit, was eine direkte Integration und vollständige Anpassung innerhalb lokaler Projektdateien ermöglicht. Durch einen Style-Prop-gesteuerten Ansatz bilden diese Komponenten Design-Token auf Attribute ab, wodurch sichergestellt wird, dass Layouts konsistent mit dem zugrunde liegenden Design-System bleiben, während responsive Anpassungen durch Breakpoint-Injection unterstützt werden. Die Sammlung deckt eine breite Palette produktionsreifer Interface-Muster ab, einschließlich gängiger Webanwendungsansichten und interaktiver Layouts. Entwickler können diese Komponenten in isolierten Frames in der Vorschau betrachten, um ihr Verhalten über verschiedene Bildschirmgrößen hinweg zu verifizieren, bevor sie den Quellcode in ihre eigenen Projekte kopieren, um Entwicklungsworkflows zu beschleunigen.