24 Repos
Component sets that use declarative markup for interface definition.
Distinguishing note: Focuses on the declarative nature of the component set.
Explore 24 awesome GitHub repositories matching user interface & experience · Declarative UI Components. Refine with filters or upvote what's useful.
This project is a generative development environment designed to build reactive, modular user interfaces through natural language prompts. It functions as a declarative framework that translates descriptive requirements into functional code, structured layouts, and interactive components. By utilizing a reactive state architecture, the system ensures that application data remains synchronized across components, triggering automatic updates whenever state values are modified. The platform distinguishes itself through its automated design system generation and cross-platform capabilities. It em
Builds complex user interfaces by nesting modular, state-aware building blocks that update automatically.
React Router is a client-side routing library for React that maps browser URLs to specific user interface components. It functions as a declarative navigation framework used to manage application state and navigation paths within single-page applications. The library handles the extraction of dynamic URL parameters to render content based on the current browser path. It synchronizes application state with the browser URL, enabling the use of the back and forward buttons and allowing for bookmarking. The framework covers declarative UI navigation and browser history management. It employs URL
Uses declarative components to map specific URL paths to React components and organize interface flow.
This project is a utility-first component library that provides a comprehensive suite of pre-styled, reusable interface elements. It functions as a build-time engine that generates design-system-compliant styles by mapping semantic tokens to standard HTML elements and utility classes. By compiling all component styles into static CSS at build time, the library eliminates the need for client-side style calculation, ensuring efficient performance. The library distinguishes itself through a configuration-driven architecture that manages color palettes and visual styles, enabling dynamic switchin
Translates simple class-based markup into fully styled and interactive web components.
Framer Motion is a React animation library and hardware-accelerated motion engine. It provides a suite of systems for managing declarative transitions, automated layout interpolation, and animation states within React user interfaces. The project distinguishes itself through a layout transition orchestrator that automatically interpolates visual changes when elements shift position or size. It includes an interactive gesture system to trigger motion based on drags, hovers, and taps, as well as tools for binding animation progress to scroll positions. The library covers a broad range of motio
Uses React components to abstract complex animation logic into simple props describing desired visual states.
Redoc is an API documentation generator that transforms standard API specification files into interactive, responsive, and highly customizable web-based documentation interfaces. It provides a three-panel layout that includes synchronized navigation, code samples, and search functionality, allowing developers to explore endpoints and schemas directly within a browser-based environment. Beyond rendering, the project functions as an API governance toolkit that enforces structural standards and quality rules across API definitions. It includes a suite of processing utilities for bundling, splitt
Transforms structured API definitions into interactive web interfaces using a declarative model.
This project is a command-line utility and development framework designed to modify, extend, and customize the Spotify desktop client. It functions as a binary patching engine that injects custom scripts, stylesheets, and interface components directly into the host application, enabling users to alter visual themes and add new functionality. The tool distinguishes itself by providing a comprehensive development environment for building modular extensions and custom applications. It includes a hot-reloading pipeline for rapid iteration, a declarative library for constructing interactive UI pan
Provides a declarative library for constructing interactive UI panels and sidebar components.
BBLL is an Android TV media application designed to serve as a third-party client for the Bilibili video platform. It provides a native interface optimized for large-screen displays, allowing users to browse and watch streaming content directly on television hardware. The application distinguishes itself by offering a custom viewing experience that integrates specific controls for remote navigation and touch-based input. It manages media playback through a dedicated interface that supports gesture-based seeking and adjustment, ensuring consistent interaction across different hardware environm
Constructs the interface using a hierarchy of reusable view components that update automatically in response to state changes.
LX Music Mobile is an open-source music streaming client designed to provide a unified audio playback experience across mobile and desktop operating systems. It functions as a centralized interface that aggregates audio content from multiple online sources, allowing users to discover and stream media through a single application. The platform distinguishes itself by providing a consistent media control environment that abstracts platform-specific audio APIs, ensuring uniform playback behavior regardless of the underlying hardware. It supports the organization and management of personal music
Constructs the user interface through a tree of reusable components that reactively update based on underlying media state.
Opentui is a terminal user interface framework for building interactive command line applications. It provides a component-based system featuring a flexbox layout engine, a virtual node component tree, and a low-level 2D cell array renderer. The project is distinguished by a sophisticated keyboard binding engine that maps complex multi-stroke sequences and chords to named commands using prioritized, reactive layers. It also implements a plugin architecture that allows external modules to inject custom UI components into designated layout slots and extend input logic at runtime. Its capabilit
Supports interface construction via both imperative instance-based approaches and declarative virtual node graphs.
This project provides a visual credit card form UI component and payment input visualizer. It creates an interactive checkout interface that displays a dynamic visual representation of a credit card, updating in real time as users enter payment details into a form. The interface includes localized payment capabilities, allowing the replacement of default labels and validation messages with custom strings to support multiple languages. Users can customize visual fields and input placeholders to control the default text and symbols displayed during the checkout process. The system manages real
Exposes visual customizations through a set of configurable properties that control placeholders and styles.
React 360 is a framework for building immersive virtual reality experiences that run in a web browser using a declarative React component model. It functions as a browser-based VR platform and a WebGL VR renderer, enabling developers to create 360-degree panoramic and stereoscopic content without requiring native code installation. The framework provides a declarative VR component library that describes VR scenes as nested React components, with props mapping to 3D objects, lights, and camera positions. It handles user input from VR controllers, gaze tracking, and mouse events through a unifi
Describes VR scenes as nested React components with props mapping to 3D objects, lights, and camera positions.
SwiftUIX is a framework extension and component library that provides specialized layout tools and native platform bridges for SwiftUI. It functions as a declarative toolkit for building macOS and iOS applications by adding missing native components and expanded interface elements to the standard library. The project focuses on bridging declarative state to native imperative APIs, particularly for macOS desktop interfaces. It includes specialized controls for window visibility, navigation bar appearance, and system status bar integration, as well as tools for managing system activity controll
Provides additional declarative interface elements that bridge gaps in native platform functionality.
react-error-boundary is a set of components and handlers designed to intercept JavaScript runtime exceptions and provide graceful user interface replacements during failures. It functions as a wrapper that catches errors within a component tree to render a fallback interface, preventing the entire application from crashing. The project provides a mechanism for handling both synchronous errors during rendering and unexpected errors from asynchronous callbacks or event handlers. This ensures that failures are isolated within specific segments of the component tree, maintaining the stability and
Implements a custom replacement interface to keep the application functional after a component subtree crashes.
Litho is an Android declarative UI framework and component library used to build user interfaces through a declarative API and immutable state. It functions as an asynchronous layout engine that maps components to a structured view hierarchy to automate view updates. The framework optimizes rendering performance by computing element positions on background threads to prevent blocking the main UI thread. It further improves efficiency by flattening nested view hierarchies and caching layout results. The system includes capabilities for state reconciliation, component recycling, and the render
Uses a declarative API to define UI components that map to a structured view hierarchy.
Reach Router is a client-side routing library for React applications that maps URL patterns to components without full page reloads. It defines navigation rules and component rendering through declarative route configuration, using nested React component trees instead of separate configuration files. The library supports parent-child route hierarchies so shared UI elements persist across page transitions, and provides a declarative Navigate component that triggers URL changes and view updates when rendered. It extracts dynamic segments from URL patterns and passes them as props to matched rou
Ships a declarative Navigate component that triggers URL changes and view updates when rendered.
Vue Apollo is a GraphQL integration library for Vue applications that connects Vue components to GraphQL APIs using Apollo Client. It provides a reactive data layer for querying, mutating, and subscribing to data from GraphQL endpoints, with automatic cache updates and real-time subscription support. The library offers multiple API surfaces for working with GraphQL data, including slot-based declarative components, composable functions for the Composition API, and Options API integration. It handles the full lifecycle of GraphQL operations, from automatic data fetching with reactive queries t
Provides slot-based Vue components that declaratively handle loading, error, and success states for GraphQL queries.
Vue Apollo is a GraphQL client library for Vue.js that integrates Apollo GraphQL queries and mutations into Vue components with reactive data binding. It provides a reactive data layer that automatically updates Vue component state when GraphQL query results change, and supports server-side rendering by prefetching queries during SSR to deliver fully populated HTML on initial page load. The library allows GraphQL queries and mutations to be declared directly inside Vue component options using the apollo property, keeping data dependencies co-located with the UI. It wraps Apollo Client's nor
Provides declarative UI components that co-locate GraphQL data dependencies with Vue component definitions.
ComponentKit is a declarative UI framework for building iOS interfaces through composition of small, reusable components. It provides a structured approach to constructing user interfaces where each component is defined as an immutable, pure function of its inputs, enabling predictable rendering and state management. The framework supports both stateless and stateful components, with controllers that can be attached to manage persistent state across component updates. The framework distinguishes itself through its component architecture that emphasizes explicit data flow and compile-time safe
Provides a declarative API for composing reusable view components from immutable inputs.
Motion Primitives ist ein animiertes UI-Kit und eine React-Animations-Komponentenbibliothek, die als Web-Motion-Framework konzipiert ist. Es bietet eine Sammlung vorgefertigter, anpassbarer visueller Komponenten, die verwendet werden, um komplexe Interface-Animationen und Übergänge innerhalb einer Browserumgebung zu implementieren. Die Bibliothek konzentriert sich auf animiertes UI-Design und visuelles Frontend-Polishing. Sie ermöglicht die Entwicklung interaktiver Webkomponenten und schnelles UI-Prototyping durch die Bereitstellung wiederverwendbarer Primitives, die Bewegungseffekte handhaben, ohne dass benutzerdefinierte Logik von Grund auf neu erstellt werden muss. Das Framework integriert Framer Motion für physikbasierte Übergänge und verwendet Tailwind CSS für das Styling. Es nutzt eine komponentenbasierte Abstraktion und TypeScript-Typdefinitionen, um strukturelle Verträge für Komponenten-Eigenschaften sicherzustellen.
Provides component patterns that abstract complex motion logic into declarative properties for easier implementation.
TinyBase ist ein reaktiver Datenspeicher und eine In-Memory-relationale Datenbank, die für die clientseitige Status-Persistenz entwickelt wurde. Sie dient als Local-First-Sync-Engine, die verteilten Status mithilfe von Conflict-free Replicated Data Types (CRDTs) und logischen Uhren zusammenführt, um eine deterministische Datenkonvergenz sicherzustellen. Das Projekt bietet eine Schema-Validierungsbibliothek, die externe Definitionen aus Tools wie Zod, Yup und TypeBox in typsichere Store-Definitionen konvertiert. Es stellt eine Infrastruktur für kollaboratives Echtzeit-Editieren bereit und nutzt die Synchronisation mit Automerge, Yjs und PartyKit, um einen konsistenten Status über mehrere Clients und Server hinweg beizubehalten. Die Kompetenzoberfläche umfasst relationale Datenmodellierung mit Tabellen und Fremdschlüsseln, SQL-ähnliche Abfragen und Indexierung sowie atomare Transaktionen für gruppierte Mutationen. Es unterstützt eine breite Palette an Persistenz-Adaptern, darunter Browser-Storage, SQLite und Cloudflare Durable Objects. Das System bietet zudem bidirektionales Status-Binding und deklarative Komponenten für die Integration mit React, SolidJS und Svelte.
Provides pre-built declarative components to display specific parts of the data store.