9 repository-uri
Broadcasting design tokens and scales to a component tree using a context provider.
Distinguishing note: Existing candidates are for GraphQL, Android, or AI context; none cover React theme context injection.
Explore 9 awesome GitHub repositories matching user interface & experience · Context-Based Theme Injection. Refine with filters or upvote what's useful.
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
Uses a React context provider to broadcast design tokens and scales to all descendant components in the tree.
Acest proiect este o bibliotecă UI bazată pe Material Design și un kit de componente mobile cross-platform. Oferă un set de componente de interfață pre-stilizate și un framework de layout conceput pentru a asigura o experiență vizuală consistentă pe diferite dispozitive mobile. Biblioteca include un sistem de gestionare a temelor mobile pentru definirea și actualizarea paletelor de culori globale și a regulilor de stilizare în întreaga interfață a aplicației. Implementează tipare de layout standardizate și reguli de spațiere pentru a menține un design curat și unitar. Toolkit-ul acoperă construcția formularelor și interfețelor mobile folosind elemente precum butoane, carduri, câmpuri de introducere text, indicatori de încărcare, comutatoare de selecție și slidere de valori.
Passes global color palettes and styling variables through a provider tree to all nested components using React context.
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.
Uses a centralized provider to broadcast visual theme and dark mode settings to all nested components.
react-loading-skeleton este o bibliotecă React pentru randarea formelor de tip placeholder care simulează stările de încărcare a conținutului. Oferă o colecție de componente UI tematice utilizate pentru a reprezenta interfețele de încărcare înainte ca datele să fie preluate și afișate. Biblioteca dispune de un provider de teme ierarhic care permite gestionarea globală sau imbricată a culorilor și animațiilor. Include placeholder-e personalizabile care suportă diverse dimensiuni și forme, cum ar fi indicatori circulari pentru elementele de profil și forme de tip bloc pentru conținutul general. Sistemul implementează standarde de accesibilitate prin maparea componentelor la atributele screen reader-elor și detectarea preferințelor de reducere a mișcării la nivel de sistem pentru a modifica animațiile. Utilizează efecte de tip shimmer bazate pe CSS și placeholder-e care moștenesc dimensiunile pentru a menține stabilitatea layout-ului.
Uses a React context provider to broadcast theme configuration and design tokens to all nested skeleton components.
This project is a cross-platform mobile UI framework and component library for building native interfaces. It provides a suite of pre-built interface controls and a scalable design system to ensure a uniform visual language across mobile screens. The library is centered on a theme-based system that uses a centralized configuration object to manage colors, spacing, and typography. This configuration propagates through the component tree, allowing developers to customize the global theme or apply local style overrides to individual elements. The framework includes a collection of reusable Mate
Broadcasts design tokens and scales to the component tree using a context provider.
Horizon UI Chakra este un template de dashboard și o bibliotecă de componente cuprinzătoare, concepute pentru construirea de aplicații web administrative. Oferă un boilerplate fundamental care utilizează o arhitectură modulară, bazată pe componente, pentru a facilita construcția rapidă a interfețelor de gestionare complexe și a panourilor de vizualizare a datelor. Proiectul se distinge prin integrarea unui sistem de design centralizat care propagă token-urile vizuale în întreaga aplicație, asigurând branding și stilizare consistente pentru toate elementele interfeței. Suportă layout-uri responsive prin sisteme de grid fluid și oferă o personalizare extinsă a temelor, inclusiv suport pentru modurile light și dark, pentru a se alinia cerințelor specifice de accesibilitate și vizualitate. Biblioteca include o suită de template-uri de pagini pre-construite și elemente UI reutilizabile care eficientizează dezvoltarea funcționalităților standard ale aplicației, cum ar fi autentificarea și analytics. Oferă, de asemenea, instrumente de linie de comandă pentru scaffolding-ul proiectului, permițând dezvoltatorilor să genereze structuri de aplicații full-stack și să sincronizeze activele de design cu codul implementat pentru a menține consistența pe tot parcursul ciclului de viață al dezvoltării.
Propagates global design tokens throughout the component tree using a provider-based dependency injection pattern.
This project is a styling library for Vue that enables component-based design by attaching CSS rules directly to HTML tags or component constructors. It utilizes tagged template literals to encapsulate design logic within JavaScript, allowing developers to define, extend, and manage styles directly alongside component code. The library distinguishes itself through a dynamic style injection engine that evaluates functions against component properties at runtime, ensuring visual output updates in response to data changes. It supports polymorphic rendering, which allows the underlying HTML eleme
Distributes shared design tokens and visual properties to nested components through a hierarchical provider pattern to ensure consistent visual language.
Treat este o bibliotecă de stilizare care extrage CSS din definițiile JavaScript în timpul procesului de build pentru a elimina overhead-ul la runtime. Funcționează ca un instrument de extracție statică a stilurilor, convertind definițiile de stil la nivel de componentă în fișiere CSS optimizate, de sine stătătoare. Framework-ul este conceput pentru construirea de sisteme de design type-safe, temabile, care permit componentelor interfeței utilizator să își adapteze aspectul bazat pe setările active ale sistemului de design. Biblioteca se distinge prin permiterea compoziției complexe de stiluri, inclusiv pseudo-selectori, media queries și animații, într-o structură de obiect unificată care rămâne compatibilă cu extracția statică. Suportă variații vizuale dinamice prin maparea definițiilor de stil către clase CSS pre-generate, utilizând un mecanism de lookup ușor pentru a rezolva temele la runtime. Această abordare permite schimbarea temelor și încărcarea temelor la cerere fără a necesita o reîncărcare completă a paginii sau sacrificarea beneficiilor de performanță ale CSS-ului static. Dincolo de capabilitățile sale de extracție de bază, biblioteca oferă instrumente pentru configurarea globală a temelor și distribuția bazată pe context pentru a asigura consistența vizuală în aplicații la scară largă. Include suport pentru randarea pe server (server-side rendering), asigurându-se că stilurile sunt gata pentru încărcările inițiale ale paginii și se integrează cu fluxurile de lucru de dezvoltare pentru a oferi hot module reloading pentru modificările de stil. Biblioteca este configurată prin pipeline-uri de build standard, care gestionează transformarea, minificarea și convențiile de denumire ale output-ului CSS generat.
Propagates design tokens through the component tree using a provider pattern for consistent visual styling.
This project is a high-performance data grid component designed for React applications. It provides a declarative framework for rendering large-scale datasets and complex tabular structures by utilizing a canvas-based drawing engine instead of traditional document object model nodes. The library distinguishes itself through a windowed virtualization engine that maintains constant memory usage by rendering only the visible portion of the grid. It translates pointer interactions into specific cell references through coordinate-based mapping and supports the injection of external application sta
Injects application state and themes into the canvas environment using React context providers for consistent data access.