Web Components
Contents
Standards
Guides
Best Practices
Examples
Collection of web components that implement common web UI patterns.
Series of web components examples, related to the MDN web components documentation.
Real World
Components
Custom element that allows to create a dark mode toggle or switch.
Modern rich text editor with plugin architecture, immutable state, and zero-config framework-agnostic deployment.
Web component for rendering customizable, animate-able, SVG-based QR codes.
Web component for creating documentation from OpenAPI Specification.
Animated toggle button to switch between light, dark, and system theme.
Component Libraries
A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.
Collection of rich web components that includes framework bindings. Created with StencilJS.
Custom elements for using Apollo GraphQL with various web components libraries.
Collection of web components for building Brightspace applications.
Standalone Components for SPA routing, displaying data from web services, and more.
High-quality, customizable web components for common user interface patterns.
Enterprise ready set of web components which work best with Eclipse Furo.
Set of web components for embedding immersive (VR & AR) content.
Set of highly performant, accessible and flexible Web Components.
Custom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.
A schema for mutation testing results with the web components to visualize it.
Components for building web applications with Nuxeo using Web Components.
Collection of web components designed for business applications.
Collection of web components used by TEI Publisher and apps generated by it.
Collection of lightweight web components used by Leavitt Group Enterprises.
Collection of user interface web components for Umbraco CMS.
Evolving set of high-quality web components for building business web applications.
Components for creating VSCode extensions which use the Webview API.
Design Systems
Set of components to build rich space app experiences with established interaction patterns.
Twig and Web Component-powered UI components, reusable visual styles and tooling.
Collection of web components that adheres to the Freshworks Design System.
Library of Web Components that supports Microsoft's Fluent design language.
Set of encapsulated web components consuming the GOV.UK Design System.
Building blocks of the Lyne Design System are based on Web Components.
HTML Framework and Design System based on Web Components and runtime CSS generation.
Collection of flexible and lightweight Web Components based on the Unified Design Kit.
JSTOR's design system to create cohesive, supportive, and beautiful experiences.
Web components for building uniform experiences with the Red Hat brand.
Adobe Spectrum design language implementation built with Web Components.
Use Cases
This article explains why Web Components are a good choice for large organizations.
An explanation of the reasons behind using Web Components, by @maxlynch
A look at how Web Components are contributing to the growth of the web.
The second part of a series on enterprise Web Components, featuring Nuxeo, Ionic, and Vaadin.
Meta Frameworks
Web component framework to easily create user-first experiences for the web.
SSR framework that makes working with the WebComponents standard a breeze.
Starter Kits
Testing Solutions
Ruby gem that adds basic support for the Shadow DOM to Capybara.
Test your Lit elements and native web components in Cypress with all the modern browsers.
Libraries
Class Based
Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
Simple and lightweight base classes for web components with a beautiful API.
Building blocks and utilities that are used when building Forge Web Components.
Set of small libraries designed to add the bare minimum to web components to make you productive.
Write custom elements with reactivity and templating powered by Solid.js signals and effects.
Functional
Integrations
Generate/register a custom element from a preact component.
Automate the wrapping of a React component in a custom element.
Export your project components as custom elements for integration into external pages.