67 Repos
Libraries and patterns for building user interfaces through modular, reusable components.
Distinguishing note: Focuses on the architectural paradigm of UI components rather than specific design systems.
Explore 67 awesome GitHub repositories matching user interface & experience · Component-Based UI Frameworks. Refine with filters or upvote what's useful.
React ist eine JavaScript-Bibliothek für den Aufbau von Benutzeroberflächen, basierend auf einer komponentenorientierten Architektur und unidirektionalem Datenfluss.
Provides a framework for building modular, reusable interface elements that synchronize with application state using a unidirectional data flow.
Vue ist ein progressives, komponentenbasiertes JavaScript-Framework, das für den Aufbau reaktiver Benutzeroberflächen und Single-Page-Anwendungen entwickelt wurde. Es konzentriert sich auf ein deklaratives Vorlagensystem, das HTML in effiziente Render-Funktionen umwandelt und es Entwicklern ermöglicht, komplexe Schnittstellen in isolierte, wiederverwendbare Einheiten zu organisieren, die automatisch mit dem Anwendungszustand synchronisieren. Das Framework zeichnet sich durch ein reaktivitätsbasiertes Abhängigkeitsverfolgungssystem aus, das den Datenzugriff während des Renderns überwacht, um präzise Updates auszulösen. Es bietet eine flexible Architektur, die sowohl die inkrementelle Einführung als auch die Entwicklung von Anwendungen in vollem Umfang unterstützt. Entwickler können ein robustes, Plugin-basiertes Erweiterbarkeitsmodell nutzen, um globale Logik zu injizieren, während die virtuelle DOM-Abgleichung des Frameworks effiziente Schnittstellen-Updates durch die Berechnung minimaler Mutationen sicherstellt. Über seine Kern-Rendering-Fähigkeiten hinaus enthält das Projekt eine umfassende Suite von Tools zur Verwaltung des Anwendungszustands, URL-basiertem Routing und serverseitigem Rendering. Es bietet umfassende Unterstützung für Komponentenkomposition, Inhaltsverteilung und Animationsmanagement, neben integrierten Sicherheitsmaßnahmen wie automatischem Content-Escaping, um häufige Schwachstellen zu verhindern. Das Framework wird mit offiziellen Typdeklarationen vertrieben, um die statische Analyse zu unterstützen, und kann über Standard-Paketmanager installiert oder direkt über Skript-Tags in Browserumgebungen integriert werden.
Ships a progressive, component-based architecture for building reactive user interfaces and single-page applications.
This project is a component-based UI framework and a React Material Design library. It provides a comprehensive set of reusable interface elements that implement Google Material Design specifications to ensure consistent visual styles and behaviors across web applications. The framework enables the construction of professional layouts for enterprise web interfaces and the rapid prototyping of frontend designs. It uses a collection of pre-designed React components to standardize layouts and accelerate the overall development process. The system integrates a styling engine and theme-based inje
Functions as a modular UI framework that builds interfaces through reusable components with standardized behaviors.
Tabby is a cross-platform terminal emulator and desktop application suite designed for managing command-line workflows and remote infrastructure. It provides a comprehensive environment for terminal session orchestration, allowing users to organize multiple active sessions through split panes and custom layouts. The application functions as a secure remote connection manager, supporting advanced authentication, port forwarding, and persistent network sessions via an asynchronous protocol layer. The project distinguishes itself through a modular plugin architecture that enables users to extend
Composes the user interface from a collection of reusable, stateful components that manage their own layout and behavior.
Twenty is a headless customer relationship management framework that enables developers to build, version, and deploy custom business applications using code. By utilizing a declarative approach to data modeling, the platform allows for the definition of custom objects, fields, and complex relationships directly within the source code. This schema-driven architecture automatically generates corresponding REST and GraphQL APIs, ensuring that data structures and interface components remain synchronized across development and production environments. The platform distinguishes itself through a m
A layout architecture that allows developers to inject custom React components and navigation elements directly into the application interface.
This project is a comprehensive educational knowledge base designed to support developers in mastering React and its surrounding ecosystem. It serves as a technical interview resource, providing a structured collection of questions and answers that cover core concepts, architectural patterns, and common development challenges. The repository distinguishes itself by offering detailed explanations of fundamental React principles, including component-based composition, the declarative UI paradigm, and state-driven data flow. It provides clarity on complex topics such as the Fiber reconciliation
Defines the core architectural approach of building modular and reusable user interface elements.
vue2-elm is a comprehensive Vue.js e-commerce reference application and single-page application boilerplate. It provides a foundational architecture for building complex online food delivery platforms, utilizing Vue 2 and Vuex for centralized state management. The project functions as a complete frontend template specifically tailored for food delivery services. It includes pre-configured user interface pages for merchant browsing, delivery address management, and the processing of food orders. The application covers a wide range of e-commerce capabilities, including shopping cart management
Utilizes a modular, component-based architecture to build reusable e-commerce user interface patterns.
Video.js is a customizable HTML5 video player framework and JavaScript media plugin system. It provides a foundation for rendering and controlling web video playback across different devices and screen sizes, supporting both standard HTML5 integration and adaptive bitrate streaming for live or on-demand content. The project is distinguished by a modular architecture that allows for the extension of playback functionality through a class-based plugin system and middleware-based method interception. This enables the development of tailored media interfaces and the integration of specialized beh
Builds a customizable video interface using a hierarchy of modular, reusable HTML components.
This project is a comprehensive server-side web framework designed for building scalable web applications and services. It provides a structured, component-based architecture that integrates a dependency injection container to manage service lifecycles and promote loose coupling across the software stack. The framework enables the creation of interactive client-side interfaces through a component-based model that synchronizes state directly with the browser. The platform distinguishes itself through a highly configurable middleware-based request pipeline and an attribute-based routing engine
Create responsive client-side experiences using reusable components that update dynamically in the browser to provide users with immediate feedback and smooth navigation.
This project is a web-based diagramming platform that automates the creation of flowcharts and technical diagrams using generative artificial intelligence. It functions as a text-to-diagram generator, allowing users to input natural language prompts that are interpreted by large language models to produce structured visual representations. The platform distinguishes itself by integrating these AI-driven interpretations with a browser-based drawing surface. It translates user intent into standard diagramming syntax, which is then rendered as interactive visual elements on a digital canvas. Thi
Organizes the interface into modular functional units that manage specific diagramming tools and user interactions through a reactive state container.
TodoMVC is a web application specification and a JavaScript framework comparison suite. It provides a standardized set of requirements used to generate feature-complete task-tracking applications across different languages and frameworks, serving as a frontend architectural reference. The project functions as a behavioral test suite and a cross-framework benchmark. It allows for the evaluation of frontend libraries by comparing identical application implementations to analyze differences in syntax, coding patterns, and functional capabilities. The suite covers broad capability areas includin
Demonstrates the architectural paradigm of building user interfaces through modular, reusable components.
GrapesJS is a modular, web-based visual editor framework designed for building drag-and-drop page builders and custom content management interfaces. It functions as a structural engine that manages hierarchical document models, allowing developers to create reusable design blocks and complex page compositions. By providing a schema-driven approach to UI configuration, the framework enables the construction of design environments where users can assemble layouts and manage component properties visually without writing raw code. The project distinguishes itself through a highly extensible, plug
Defines reusable design elements and logic patterns to ensure consistent styling and behavior.
Livewire is a full-stack framework for PHP that enables the development of reactive, dynamic user interfaces using server-side classes and templates. By bridging the gap between server-side logic and client-side DOM updates, it allows developers to build interactive web applications without writing custom JavaScript. The framework operates as a component-based library, where modular units encapsulate interface logic, state, and event handling directly on the server. The framework distinguishes itself through a reactive architecture that automatically synchronizes state between the browser and
Provides a component-based library for encapsulating reusable interface logic and templates into modular units that handle events and state on the server.
Wepy is a mini program development framework used to build modular user interfaces through a component-based development style. It functions as a component-based UI framework that enables the creation of reusable interface elements sharing state and logic across different platform targets. The project includes a TypeScript build pipeline that transforms TypeScript, CSS pre-processors, and template engines into browser-ready assets. It also serves as an asynchronous API wrapper that converts callback-based functions into promises to simplify asynchronous control flow. The framework covers cro
Provides a framework for building user interfaces using a modular, component-based architectural approach.
Skill-map is a static site generator designed to document and visualize engineering competency frameworks. It provides a structured system for defining technical skills, learning milestones, and career progression paths, allowing organizations to map professional growth across specialized domains and technology stacks. The project utilizes a dependency-graph data model to represent the logical progression of technical mastery, which is defined through human-readable configuration files. This approach enables teams to audit collective technical capabilities, identify knowledge gaps, and provid
Constructs interfaces from modular, reusable building blocks that encapsulate visual elements and interaction logic.
vx is a declarative charting framework and SVG data visualization library. It serves as an integration layer that combines D3 mathematical scales and shapes with a component-based UI for rendering visualizations. The project provides a set of building blocks for constructing custom charts and diagrams using React components. It bridges mathematical data and visual representation by utilizing low-level primitives to manage scalable vector graphics without manual document object model manipulations. The library covers a broad capability surface including custom chart development, declarative S
Provides a component-based UI architecture to wrap low-level graphics logic for declarative rendering.
Serena is a static site generator designed to transform markdown files into structured, navigable documentation websites. It functions as a documentation engine that processes source content into pre-rendered HTML pages, providing a clean and organized reading experience for technical manuals and knowledge bases. The platform distinguishes itself through a component-based layout framework that injects parsed content into reusable templates to maintain design consistency. It also features a built-in client-side search engine that constructs local databases, allowing users to retrieve informati
Assembles web pages by injecting content into reusable layout templates for consistent design.
Vue-pure-admin is a Vue 3 admin dashboard template and frontend boilerplate designed for developing backend management tools. It functions as a TypeScript web application scaffold that integrates Vite for the build pipeline and Element Plus for the UI framework. The project provides a responsive admin interface that adapts to both desktop and mobile screens. It is structured as an enterprise frontend architecture to support the creation of scalable professional web applications. The system includes capabilities for bootstrapping backend management systems, optimizing bundle sizes, and deploy
Provides a modular UI architecture based on reusable components to ensure visual consistency.
This project is a development framework that enables the creation of cross-platform mobile mini programs using the component-based architecture and reactive data binding of Vue.js. It functions as a build system that transforms web-oriented component code into native-compatible templates and logic, allowing developers to build modular user interfaces that run within restricted mobile environments. The framework distinguishes itself through a sophisticated build pipeline that deconstructs single-file components into platform-specific templates, logic, and style files. It employs compile-time t
Developing modular and reusable user interface components that encapsulate logic, templates, and styles to simplify maintenance and improve code organization.
Vue Manage System is a type-safe administrative dashboard framework built with Vue 3 and Element Plus. It serves as a management template for backend systems, integrating role-based access control to restrict pages and actions based on assigned user permissions. The project distinguishes itself through a comprehensive set of administrative tools, including a data visualization dashboard with interactive charts and a content management system featuring rich text editing and image cropping utilities. It utilizes TypeScript for static typing and Pinia for centralized state management. The syste
Constructs the management interface using a modular system of reusable UI components.