Awesome GitHub RepositoriesCustom Element Frameworks

Polymer is a custom element framework and web component library used to build reusable, encapsulated custom elements that function as native browser components. It serves as a system for defining public properties and attributes that trigger automatic state observation and updates within the DOM. The project functions as a data binding library, providing a mechanism to synchronize state between internal component properties and external models via two-way data binding. It covers the development of frontend component libraries and web component architecture, enabling the creation of modular u

Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface elements. It provides a collection of custom element components and reusable HTML tags that encapsulate style and behavior to work across any JavaScript framework or plain HTML pages. The system is designed as a themable UI component system, utilizing CSS variables to manage visual themes and dark mode support. This allows for the implementation of custom design systems and a consistent visual language across web environments. The library covers broader capabilities in accessible int

Wired-elements este o bibliotecă de componente web desenate manual, oferind o colecție de elemente HTML stilizate pentru construirea de wireframe-uri și mockup-uri. Acesta servește ca un framework UI de wireframing care permite crearea de prototipuri low-fidelity cu o estetică schițată, manuală. Biblioteca oferă componente pentru design web desenat manual și prototipare UI rapidă. Aceste elemente sunt concepute pentru a susține wireframing-ul low-fidelity pentru a planifica interfețele utilizator și a testa layout-urile înainte de dezvoltarea high-fidelity. Proiectul utilizează o arhitectură de componente web cu grafică vectorială bazată pe SVG pentru a menține un aspect desenat manual consistent. Suportă integrarea în diverse framework-uri JavaScript și utilizează variabile CSS pentru teme de grosime a liniilor și culori.

Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity visual building blocks designed to produce a rough, non-polished aesthetic for early-stage design iterations. The framework enables the creation of rapid UI prototypes, low-fidelity wireframes, and conceptual UX mappings. It uses a sketched appearance to help focus iterations on layout and functionality rather than final visual polish. The library utilizes SVG-based path rendering and web component encapsulation to deliver its hand-drawn style. Visual states are managed through e

Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes

This project is an interactive tutorial generator and static site generator that transforms source documents, such as Markdown and Google Docs, into structured instructional guides. It functions as a documentation conversion tool that compiles source content into static HTML assets and metadata for distribution to public or private audiences. The system utilizes a custom element UI framework to embed interactive instructional components using standard HTML custom elements, removing the need for external JavaScript frameworks. It supports multi-format content export, allowing a single source o

Lit-element este un framework de elemente personalizate și o bibliotecă UI reactivă care oferă o clasă de bază pentru crearea elementelor HTML standard. Este conceput pentru a construi componente web care își actualizează automat starea vizuală atunci când proprietățile interne sau datele se modifică. Proiectul permite dezvoltarea de componente încapsulate folosind shadow root pentru a izola stilurile și structura. Utilizează template literals din JavaScript pentru a reda template-uri declarative fără a necesita un pas de compilare. Biblioteca acoperă gestionarea stării prin urmărirea proprietăților reactive și sincronizarea proprietăților claselor JavaScript cu atributele HTML. Include, de asemenea, capabilități pentru limitarea selectorilor CSS și gestionarea ciclurilor de randare asincronă pentru a gestiona actualizările interfeței.

Acest proiect este un framework modular de interfață utilizator pentru aplicații Vue, care oferă o colecție de componente reutilizabile construite cu Tailwind CSS. Funcționează ca un instrument de sistem de design bazat pe configurare, permițând dezvoltatorilor să mențină consistența vizuală în aplicații complexe prin gestionarea centralizată a temelor și stilizarea bazată pe utilitare. Biblioteca se distinge printr-o arhitectură extrem de configurabilă care suportă maparea stilurilor bazată pe variante și personalizarea instanțelor de componente. Dezvoltatorii pot defini valori implicite globale sau pot crea mai multe versiuni ale aceluiași element de interfață, permițând comutarea vizuală dinamică și suprascrieri specifice de proprietăți fără a duplica codul. Această abordare asigură că componentele rămân flexibile în timp ce aderă la un limbaj de design unificat. Framework-ul acoperă o gamă largă de cerințe de interfață, inclusiv instrumente specializate pentru selectarea datei și orei și designul structurat al input-urilor de formulare. Pune accent pe performanță prin suportarea optimizărilor la momentul build-ului, cum ar fi importarea selectivă a componentelor și eliminarea definițiilor de stil neutilizate, pentru a minimiza dimensiunea finală a bundle-ului aplicației.