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 este o bibliotecă de componente UI React și un framework de sistem de design. Oferă o colecție de componente de interfață reutilizabile, tipizate, și ghiduri vizuale pentru a asigura o experiență de utilizare unificată în layout-urile aplicațiilor web. Proiectul funcționează ca un toolkit UI tematic, permițând gestionarea esteticii vizuale și posibilitatea de a comuta între modurile light și dark. Încorporează o bibliotecă de stilizare CSS-in-JS pentru definirea stilurilor personalizate și a seturilor de reguli pentru elementele individuale ale aplicației. Framework-ul acoperă domenii vaste, inclusiv implementarea sistemului de design, stilizarea interfeței personalizate și testarea componentelor UI în medii simulate pentru a verifica corectitudinea vizuală.

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 is a React theme framework and CSS-in-JS utility used for building themeable user interfaces. It functions as a design system tool that establishes centralized, constraint-based scales for colors, typography, and spacing to ensure visual consistency across applications. The framework distinguishes itself through an array-based responsive shorthand for mobile-first layouts and a dedicated color mode manager that synchronizes with browser preferences and persists user selections. It also features a system for creating named style variants to control component appearance via properties

Gestalt este o bibliotecă de componente UI React sigură din punct de vedere al tipurilor și un sistem de design. Oferă o colecție de elemente de interfață reutilizabile și token-uri de design care respectă standardele internaționale de accesibilitate pentru a asigura utilizabilitatea pentru persoanele cu nevoi diverse. Framework-ul include un sistem de layout web responsiv cu breakpoint-uri definite și containere de grid care adaptează interfețele pentru dispozitive desktop, mobile și tablete. Dispune de o suită de componente internaționalizate care suportă mai multe limbi, scheme de culori regionale și orientări ale textului de la dreapta la stânga. Biblioteca acoperă o gamă largă de capabilități de interfață, inclusiv afișaje flexibile de tip grid și masonry cu virtualizare pentru randare de înaltă performanță, elemente de formular cuprinzătoare și sisteme de navigare. Oferă, de asemenea, instrumente pentru comunicarea stării sistemului prin alerte și bannere, overlay-uri contextuale precum modale și popover-uri, și vizualizări de date accesibile pentru metrici și tendințe. Sistemul utilizează declarații TypeScript oficiale pentru a asigura integritatea datelor și a preveni erorile de runtime în timpul dezvoltării.

This project is a React tooltip component and CSS-driven library used to display descriptive text bubbles when users hover over or focus on specific elements. It functions as an accessible UI widget and customizable framework for managing informational popovers within React applications. The library distinguishes itself through flexible anchor management, allowing a single tooltip instance to be linked to multiple trigger elements via CSS selectors or HTML data attribute binding. It provides specific controls for visibility timing and animation, as well as the ability to disable automatic sty

Braid is a design system component library built for React that provides a collection of themeable UI building blocks. It functions as an atomic CSS framework, transforming declarative style definitions into static CSS classes during the build process to ensure consistent visual output across web applications. The system distinguishes itself by prioritizing performance through build-time style extraction and compile-time code stripping. By moving styling logic and validation checks to the compilation phase, it eliminates runtime overhead and ensures that development-only warnings and deprecat

Chakra Templates este o colecție de tipare de interfață responsive preconstruite, concepute pentru integrarea în aplicații React. Funcționează ca o resursă de sistem de design frontend, oferind blocuri de construcție UI modulare care permit dezvoltatorilor să mențină standarde consistente de stil și layout pe mai multe ecrane ale aplicației. Repository-ul oferă codul sursă brut pentru fiecare template, permițând integrarea directă și personalizarea completă în fișierele de proiect locale. Prin utilizarea unei abordări bazate pe style-props, aceste componente mapează token-urile de design către atribute, asigurând că layout-urile rămân consistente cu sistemul de design subiacent, suportând în același timp ajustări responsive prin injectarea de breakpoint-uri. Colecția acoperă o gamă largă de tipare de interfață gata de producție, inclusiv vizualizări comune de aplicații web și layout-uri interactive. Dezvoltatorii pot previzualiza aceste componente în cadre izolate pentru a le verifica comportamentul pe diferite dimensiuni de ecran înainte de a copia codul sursă în propriile proiecte pentru a accelera fluxurile de lucru de dezvoltare.