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 是一个手绘风格的 Web 组件库，提供了一系列用于构建线框图和原型的样式化 HTML 元素。它作为一个线框图 UI 框架，能够以草图般的、手工的审美创建低保真原型。 该库提供了用于手绘 Web 设计和快速 UI 原型制作的组件。这些元素旨在支持低保真线框图绘制，以便在进行高保真开发之前规划用户界面并测试布局。 该项目利用具有 SVG 矢量图形的 Web 组件架构来保持一致的手绘外观。它支持集成到各种 JavaScript 框架中，并利用 CSS 变量来设置线条粗细和颜色的主题。

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

该项目是一个交互式教程生成器和静态网站生成器，可将 Markdown 和 Google Docs 等源文档转换为结构化的教学指南。它作为一种文档转换工具，将源内容编译为静态 HTML 资产和元数据，以便分发给公共或私有受众。 该系统利用自定义元素 UI 框架，使用标准 HTML 自定义元素嵌入交互式教学组件，无需依赖外部 JavaScript 框架。它支持多格式内容导出，允许将单一事实来源转换为包括 HTML 和 Jupyter Notebook 在内的多种目标格式。 该平台提供教学内容管理功能，通过元数据和标签将教程组织成主题集合和落地页。它涵盖了完整的发布生命周期，从本地预览托管和静态资产生成，到部署至云存储，以及通过集成分析工具跟踪用户参与度。

Lit-element is a custom element framework and reactive UI library that provides a base class for creating standard HTML elements. It is designed to build web components that automatically update their visual state when internal properties or data change. The project enables the development of encapsulated components using the shadow root to isolate styles and structure. It utilizes JavaScript template literals to render declarative templates without requiring a compilation step. The library covers state management through reactive property tracking and the synchronization of JavaScript class

该项目是一个用于 Vue 应用的模块化用户界面框架，提供了一系列使用 Tailwind CSS 构建的可重用组件。它作为一个配置驱动的设计系统工具，使开发者能够通过集中的主题管理和基于工具类的样式，在复杂应用中保持视觉一致性。 该库通过高度可配置的架构脱颖而出，支持基于变体的样式映射和组件实例定制。开发者可以定义全局默认值或创建同一界面元素的多个版本，从而允许动态视觉切换和特定的属性覆盖，而无需重复代码。这种方法确保了组件在遵循统一设计语言的同时保持灵活性。 该框架涵盖了广泛的界面需求，包括用于日期和时间选择的专用工具以及结构化的表单输入设计。它通过支持构建时优化（如选择性组件导入和移除未使用的样式定义）来强调性能，以最小化最终应用包的大小。