Web Components
Contents
Standards
Custom Elements
Shadow DOM
Guides
Best Practices
Examples
Collection of web components that implement common web UI patterns.
Collection of accessible, customizable, ultra-light web components.
Series of web components examples, related to the MDN web components documentation.
Collection of generic web components with a focus on accessibility, and ease of use.
Vanilla JS UI component library of HTML deprecated tags.
Real World
Components
Editable table web component.
API documentation and live playground for Web Components.
Standalone chess board web component.
Web component for drawing patterns with CSS.
Custom element that allows to create a dark mode toggle or switch.
Web component for chat with AI capabilities.
Lightweight emoji picker, distributed as a web component.
Accessible modal dialog web component.
Web component built with Svelte to view files.
Web component to visualize JSON data in a tree view.
Lite YouTube embed with a focus on visual performance.
MIDI file player and visualizer web components.
Web component for rendering interactive 3D models.
Modern rich text editor with plugin architecture, immutable state, and zero-config framework-agnostic deployment.
Custom element that embeds PDF.js default viewer.
Media player web component.
Custom element to progressively enhance image placeholders.
Web component for rendering customizable, animate-able, SVG-based QR codes.
Accessible range slider custom element with keyboard support.
Web component for creating documentation from OpenAPI Specification.
Web component for writing and rendering shaders.
Animated toggle button to switch between light, dark, and system theme.
Rich text editor custom element for everyday writing.
Customizable, extensible, accessible and framework agnostic media player.
Bring web vitals quickly into your page using custom elements.
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.
AXA CH UI components library built with Web Components.
Web components for creating interfaces by Blackstone Publishing.
Set of web components powered by Blaze CSS.
Collection of web components for building Brightspace applications.
Collection of Web Components made by Clever Cloud.
Web components for creating interactive scientific articles.
Standalone Components for SPA routing, displaying data from web services, and more.
General use Web Components for websites and applications.
Collection of custom elements for "a la carte" web development.
GitHub's Web Component collection.
High-quality, customizable web components for common user interface patterns.
Enterprise ready set of web components which work best with Eclipse Furo.
Ser of web components used by Equinor Fusion.
Complete library of UI components from Infragistics.
Set of web components for embedding immersive (VR & AR) content.
Compilation of Joomla 4 Custom Elements.
Web components library for Sme.UP.
Lightweight, customizable loading animations/spinners.
Set of highly performant, accessible and flexible Web Components.
ELMS:LN produced web components for any project.
Custom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.
Web Components for rapid development of openEHR and FHIR systems.
Collection of web components for the Microsoft Graph.
A schema for mutation testing results with the web components to visualize it.
Data visualisation web components for the life sciences.
Components for building web applications with Nuxeo using Web Components.
Set of web components for Red Hat One Platform.
Collection of web components designed for business applications.
Re-usable web components dedicated to data annotation tasks.
Serverless code experiences with web components.
A forward-thinking library of web components.
Web components for business applications.
Custom Element Wrapper for Stripe.js v3 Elements.
Collection of web components used by TEI Publisher and apps generated by it.
Collection of lightweight web components used by Leavitt Group Enterprises.
Reusable Tradeshift UI Components as Web Components.
Components to generate simple, light and responsive charts.
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.
Collection of charting web components for Warp 10.
Set of Webmarkets' public web components.
Set of common UI elements with a hand-drawn, sketchy look.
Web Components for Arduino and various electronic parts.
Collection of web components implementing portions of the OpenWeatherMap 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.
Shared Web Components for Esri's Calcite design framework.
Carbon Design System variant on top of Web Components.
Suite of web components from the Clarity Design System.
Collection of web components that adheres to the Freshworks Design System.
Library of Web Components that supports Microsoft's Fluent design language.
Library of Web Components adhering to the Forge Design System.
Set of encapsulated web components consuming the GOV.UK Design System.
Web Component library for the Helix Design System.
UI component library based on the Liquid Design System.
Building blocks of the Lyne Design System are based on Web Components.
Material Design implemented as Web Components.
Set of UI components based on Momentum Design.
HTML Framework and Design System based on Web Components and runtime CSS generation.
Web component based design system starter kit.
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.
Web Components implementing Siemens iX design system.
Adobe Spectrum design language implementation built with Web Components.
Set of reusable UI elements implementing SAP Fiori Design Guidelines.
Set of web components that implement Z+ shop style guide.
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.
A personal account of why Web Components are used, along with specific examples.
An explanation of the reasons behind using Web Components, by @viljamis
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.
Compiler to make server-side rendering of native web components easier.
Framework-independent standalone HTML serializer for generating markup for web components.
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.
querySelector that can pierce Shadow DOM roots, useful for automated testing.
Shadow DOM automation using Selenium.
Libraries
Class Based
Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
Progressive Web Components library.
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.
Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
Web Components + Virtual DOM: web standards for powerful UIs.
Write custom element classes with decorators. No dependencies.
Fast & Robust Front-End Micro-framework based on modern standards.
Compiler for generating Web Components.
Minimalist, stable, audit friendly component framework.
Web Components engine based on VDOM, JSX, MobX & TypeScript.
Functional
Small library for the creation of interfaces based on web components using functions and hooks.
A lightweight library for building functional web components using signals and Lit.
React's Hooks API implemented for web components.
UI library for creating Web Components with simple and functional API.
Library that extends Solid adding Custom Web Components and extensions.
Integrations
Render Ember and Glimmer components using custom elements.
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.
Utilise Shadow DOM in React with all the benefits of style encapsulation.
Use web components with React properties and functions.
Mount React components to the DOM using custom elements.
Simple API to create vanilla custom elements with Riot.js.