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 es una biblioteca de componentes web dibujados a mano que proporciona una colección de elementos HTML estilizados para construir wireframes y mockups. Sirve como un framework de UI de wireframing que permite la creación de prototipos de baja fidelidad con una estética esquemática y manual. La biblioteca proporciona componentes para diseño web dibujado a mano y prototipado rápido de UI. Estos elementos están diseñados para admitir wireframing de baja fidelidad para planificar interfaces de usuario y probar layouts antes del desarrollo de alta fidelidad. El proyecto utiliza una arquitectura de componentes web con gráficos vectoriales basados en SVG para mantener un aspecto dibujado a mano consistente. Admite la integración en varios frameworks de JavaScript y utiliza variables CSS para tematizar el grosor del trazo y los colores.

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

Este proyecto es un generador de tutoriales interactivos y generador de sitios estáticos que transforma documentos fuente, como Markdown y Google Docs, en guías de instrucción estructuradas. Funciona como una herramienta de conversión de documentación que compila contenido fuente en activos HTML estáticos y metadatos para su distribución a audiencias públicas o privadas. El sistema utiliza un framework de UI de elementos personalizados para incrustar componentes de instrucción interactivos utilizando elementos personalizados HTML estándar, eliminando la necesidad de frameworks JavaScript externos. Admite la exportación de contenido en múltiples formatos, permitiendo que una única fuente de verdad se traduzca a múltiples objetivos, incluyendo HTML y notebooks de Jupyter. La plataforma proporciona capacidades para la gestión de contenido instructivo, permitiendo la organización de tutoriales en colecciones temáticas y páginas de destino mediante metadatos y etiquetado. Cubre el ciclo de vida completo de publicación, desde el alojamiento de vista previa local y la generación de activos estáticos hasta el despliegue en almacenamiento en la nube y el seguimiento de la participación del usuario a través de análisis integrados.

Lit-element es un framework de elementos personalizados y una librería de UI reactiva que proporciona una clase base para crear elementos HTML estándar. Está diseñado para construir componentes web que actualizan automáticamente su estado visual cuando cambian las propiedades internas o los datos. El proyecto permite el desarrollo de componentes encapsulados utilizando el shadow root para aislar estilos y estructuras. Utiliza plantillas literales de JavaScript para renderizar plantillas declarativas sin necesidad de un paso de compilación. La librería cubre la gestión del estado mediante el seguimiento de propiedades reactivas y la sincronización de propiedades de clase de JavaScript con atributos HTML. También incluye capacidades para el alcance de selectores CSS y la gestión de ciclos de renderizado asíncronos para manejar las actualizaciones de la interfaz.

Este proyecto es un framework de interfaz de usuario modular para aplicaciones Vue que proporciona una colección de componentes reutilizables construidos con Tailwind CSS. Funciona como una herramienta de sistema de diseño impulsada por configuración, permitiendo a los desarrolladores mantener la consistencia visual en aplicaciones complejas a través de la gestión centralizada de temas y estilos basados en utilidades. La librería destaca por una arquitectura altamente configurable que admite el mapeo de estilos basado en variantes y la personalización de instancias de componentes. Los desarrolladores pueden definir valores predeterminados globales o crear múltiples versiones del mismo elemento de interfaz, permitiendo el cambio visual dinámico y anulaciones de propiedades específicas sin duplicar código. Este enfoque asegura que los componentes permanezcan flexibles mientras se adhieren a un lenguaje de diseño unificado. El framework cubre una amplia gama de requisitos de interfaz, incluyendo herramientas especializadas para la selección de fecha y hora y el diseño de formularios estructurados. Enfatiza el rendimiento al admitir optimizaciones en tiempo de compilación, como la importación selectiva de componentes y la eliminación de definiciones de estilo no utilizadas, para minimizar el tamaño final del bundle de la aplicación.