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 es una librería de componentes de UI de React y un framework de sistema de diseño. Proporciona una colección de componentes de interfaz tipados y reutilizables, además de directrices visuales para asegurar una experiencia de usuario unificada en los diseños de aplicaciones web. El proyecto funciona como un toolkit de UI con temas, permitiendo la gestión de la estética visual y la capacidad de alternar entre modos claro y oscuro. Incorpora una librería de estilos CSS-in-JS para definir estilos personalizados y conjuntos de reglas para elementos individuales de la aplicación. El framework cubre áreas clave como la implementación de sistemas de diseño, estilos de interfaz personalizados y pruebas de componentes de UI en entornos simulados para verificar la corrección visual.

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 es un framework de temas de React y una utilidad CSS-in-JS utilizada para construir interfaces de usuario tematizables. Funciona como una herramienta de sistema de diseño que establece escalas centralizadas basadas en restricciones para colores, tipografía y espaciado para garantizar la consistencia visual en todas las aplicaciones. El framework se distingue por una abreviatura responsiva basada en arrays para diseños mobile-first y un gestor de modos de color dedicado que se sincroniza con las preferencias del navegador y persiste las selecciones del usuario. También cuenta con un sistema para crear variantes de estilo con nombre para controlar la apariencia de los componentes mediante propiedades y proporciona capacidades de sincronización para traducir configuraciones de temas a Figma Styles. El proyecto cubre un amplio conjunto de capacidades de estilo, incluyendo inyección global de CSS para reseteos de elementos, anulaciones de temas anidados mediante contexto y un sistema de configuración de fusión profunda (deep-merge) para extender preajustes de diseño. También incluye un conjunto de componentes de diseño tematizables, como rejillas responsivas y entradas de formulario estandarizadas. Hay un plugin dedicado disponible para integrar el sistema de diseño dentro de sitios Gatsby.

Gestalt is a type-safe React UI component library and design system. It provides a collection of reusable interface elements and design tokens that follow international accessibility standards to ensure usability for people with diverse needs. The framework includes a responsive web layout system with defined breakpoints and grid containers that adapt interfaces for desktop, mobile, and tablet devices. It features an internationalized component suite that supports multiple languages, regional color schemes, and right-to-left text orientations. The library covers a broad range of interface ca

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 es una colección de patrones de interfaz responsivos preconstruidos diseñados para su integración en aplicaciones React. Funciona como un recurso de sistema de diseño frontend, proporcionando bloques de construcción de UI modulares que permiten a los desarrolladores mantener estándares de estilo y diseño consistentes en múltiples pantallas de la aplicación. El repositorio proporciona el código fuente original para cada plantilla, permitiendo la integración directa y la personalización completa dentro de los archivos del proyecto local. Al utilizar un enfoque basado en propiedades de estilo (style-props), estos componentes mapean tokens de diseño a atributos, asegurando que los diseños permanezcan consistentes con el sistema de diseño subyacente mientras admiten ajustes responsivos mediante la inyección de breakpoints. La colección cubre una amplia gama de patrones de interfaz listos para producción, incluyendo vistas comunes de aplicaciones web y diseños interactivos. Los desarrolladores pueden previsualizar estos componentes en marcos aislados para verificar su comportamiento en diferentes tamaños de pantalla antes de copiar el código fuente en sus propios proyectos para acelerar los flujos de trabajo de desarrollo.