awesome-web-components

generic-components

Collection of generic web components with a focus on accessibility, and ease of use

howto-components

Collection of web components that implement common web UI patterns

Nude UI

Collection of accessible, customizable, ultra-light web components

Collection of best practices and design patterns for developing web components

vanilla-retro-js

Vanilla JS UI component library of HTML deprecated tags

web-components-examples

Series of web components examples, related to the MDN web components documentation

<active-table>

Editable table web component

<api-viewer>

API documentation and live playground for Web Components

<chess-board>

Standalone chess board web component

<css-doodle>

Web component for drawing patterns with CSS

<dark-mode-toggle>

Custom element that allows to create a dark mode toggle or switch

<deep-chat>

Web component for chat with AI capabilities

<emoji-picker>

Lightweight emoji picker, distributed as a web component

<fg-modal>

Accessible modal dialog web component

<file-viewer>

Web component built with Svelte to view files

<json-viewer>

Web component to visualize JSON data in a tree view

<lite-youtube>

Lite YouTube embed with a focus on visual performance

<midi-player>

MIDI file player and visualizer web components

<model-viewer>

Web component for rendering interactive 3D models

<player-x>

Media player web component

<progressive-image>

Custom element to progressively enhance image placeholders

<qr-code>

– Web component for rendering customizable, animate-able, SVG-based QR codes

<range-slider>

Accessible range slider custom element with keyboard support

<rapi-doc>

Web component for creating documentation from OpenAPI Specification

<shader-doodle>

Web component for writing and rendering shaders

<theme-switch>

Animated toggle button to switch between light, dark, and system theme

<trix-editor>

Rich text editor custom element for everyday writing

<vime-player>

Customizable, extensible, accessible and framework agnostic media player

<web-vitals>

Bring quickly into your page using custom elements

AMP

Web component framework for easily creating user-first websites, stories, ads, emails and more

AnywhereUI

Collection of rich web components that includes framework bindings. Created with StencilJS

Apollo Elements

Custom elements for using Apollo GraphQL with various web components libraries

AXA Pattern Library

AXA CH UI components library built with Web Components

Blackstone UI

Web components for creating interfaces by Blackstone Publishing

Blaze UI Atoms

Set of web components powered by Blaze CSS

Brightspace UI core

Collection of web components for building Brightspace applications

Clever components

Collection of Web Components made by Clever Cloud

Curvenote

Web components for creating interactive scientific articles

DataFormsJS

Standalone Components for SPA routing, displaying data from web services, and more

Dile Components

General use Web Components for websites and applications

elements-sk

Collection of custom elements for "a la carte" web development

github-elements

GitHub's Web Component collection

Elix

High-quality, customizable web components for common user interface patterns

Furo Webcomponents

Enterprise ready set of web components which work best with Eclipse Furo

Fusion Web Components

Ser of web components used by Equinor Fusion

Ignite UI Web Components

Complete library of UI components from Infragistics

Immersive Custom Elements

Set of web components for embedding immersive (VR & AR) content

Joomla UI custom elements

Compilation of Joomla 4 Custom Elements

Ketch.UP

Web components library for Sme.UP

LDRS

Lightweight, customizable loading animations/spinners

Lion Web Components

Set of highly performant, accessible and flexible Web Components

LRNWebComponents

ELMS:LN produced web components for any project

Lume

Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL

Medblocks UI

Web Components for rapid development of openEHR and FHIR systems

Microsoft Graph Toolkit

Collection of web components for the Microsoft Graph

Mutation testing elements

A schema for mutation testing results with the web components to visualize it

Nightingale

Data visualisation web components for the life sciences

Nuxeo Elements

Components for building web applications with Nuxeo using Web Components

One Platform Components

Set of web components for Red Hat One Platform

Open Business Application Platform Web Components

Collection of web components designed for business applications

Pixano Elements

Re-usable web components dedicated to data annotation tasks

Playground Elements

Serverless code experiences with web components

Shoelace

A forward-thinking library of web components

Smart Web Components

Web components for business applications

Stripe Elements

Custom Element Wrapper for Stripe.js v3 Elements

TEI Publisher Components

Collection of web components used by TEI Publisher and apps generated by it

Titanium Elements

Collection of lightweight web components used by Leavitt Group Enterprises

Tradeshift Elements

Reusable Tradeshift UI Components as Web Components

TrendChart Elements

Components to generate simple, light and responsive charts

Umbraco UI Components

Collection of user interface web components for Umbraco CMS

Vaadin components

Evolving set of high-quality web components for building business web applications

VSCode Webview Elements

Components for creating VSCode extensions which use the Webview API

Warp View

Collection of charting web components for Warp 10

Webmarkets web components

Set of Webmarkets' public web components

Wired Elements

Set of common UI elements with a hand-drawn, sketchy look

Wokwi Elements

Web Components for Arduino and various electronic parts

XWeather

Collection of web components implementing portions of the OpenWeatherMap API

Astro Space UX Design System

Set of components to build rich space app experiences with established interaction patterns

Alaska Airlines design system to innovate on ideas and collaborate on the future

Web Component based design system with flexible and lightweight components

Bolt Design System

Twig and Web Component-powered UI components, reusable visual styles and tooling

Calcite Components

Shared Web Components for Esri's Calcite design framework

Carbon Web Components

Carbon Design System variant on top of Web Components

Clarity Core Web Components

Suite of web components from the Clarity Design System

Crayons

Collection of web components that adheres to the Freshworks Design System

FAST Components

Library of Web Components based on the FAST design language

Fluent UI Web Components

Library of Web Components that supports Microsoft's Fluent design language

Forge Components

Library of Web Components adhering to the Forge Design System

GOV.UK Web Components

Set of encapsulated web components consuming the GOV.UK Design System

Helix UI

Web Component library for the Helix Design System

Liquid

UI component library based on the Liquid Design System

Lyne Components

Building blocks of the Lyne Design System are based on Web Components

Material Web Components

Material Design implemented as Web Components

Momentum UI Web Components

Set of UI components based on Momentum Design

Nordhealth’s design system for products, digital experiences and brand

NuML | NUDE Elements

HTML Framework and Design System based on Web Components and runtime CSS generation

OutlineJS

Web component based design system starter kit

PatternFly Elements

Collection of flexible and lightweight Web Components based on the Unified Design Kit

Pharos Design System

JSTOR's design system to create cohesive, supportive, and beautiful experiences

Red Hat Design System

Web components for building uniform experiences with the Red Hat brand

Siemens iX Web Components

Web Components implementing Siemens iX design system

Spectrum Web Components

Adobe Spectrum design language implementation built with Web Components

UI5 Web Components

Set of reusable UI elements implementing SAP Fiori Design Guidelines

University of Michigan Library Design System

Zooplus web components

Set of web components that implement Z+ shop style guide

by

by

DNA

Progressive Web Components library

element-js

Simple and lightweight base classes for web components with a beautiful API

FAST Element

Lightweight library for building performant, memory-efficient, standards-compliant Web Components

Forge Core

Building blocks and utilities that are used when building Forge Web Components

Joist

Set of small libraries designed to add the bare minimum to web components to make you productive

Simple library for building fast, lightweight web components

Lightning Web Components

blazing fast, enterprise-grade Web Components foundation

Omi

Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating)

Panel

Web Components + Virtual DOM: web standards for powerful UIs

slim.js

Fast & Robust Front-End Micro-framework based on modern standards

Stencil

Compiler for generating Web Components

Tonic

Minimalist, stable, audit friendly component framework

WebCell

Web Components engine based on VDOM, JSX, MobX & TypeScript

atomico

Small library for the creation of interfaces based on web components using functions and hooks

haunted

React's Hooks API implemented for web components

hybrids

UI library for creating Web Components with simple and functional API

Solid Element

Library that extends Solid adding Custom Web Components and extensions

ember-custom-elements

Render Ember and Glimmer components using custom elements

preact-custom-element

Generate/register a custom element from a preact component

@adobe/react-webcomponent

Automate the wrapping of a React component in a custom element

nuxt-custom-elements

Export your project components as custom elements for integration into external pages

react-shadow

Utilise Shadow DOM in React with all the benefits of style encapsulation

reactify-wc

Use web components with React properties and functions

remount

Mount React components to the DOM using custom elements

@riotjs/custom-elements

Simple API to create vanilla custom elements with Riot.js

Benchmark Web Components technologies with various examples

The same todo application built in different Web Components libraries for benchmark purpose

AMP

Web component framework to easily create user-first experiences for the web

Web standards-based HTML framework for building lightweight web applications

luna-js

SSR framework that makes working with the WebComponents standard a breeze

Modern web setup for static sites with a sprinkle of JavaScript

Web Components Compiler

Compiler to make server-side rendering of native web components easier

WebC

Framework-independent standalone HTML serializer for generating markup for web components

Web component project scaffolding

custom-element-boilerplate

Boilerplate for creating a custom element

hello-web-components

Simple starter hello world web component written in TypeScript

nutmeg

Build, test, and publish vanilla Web Components with a little spice

capybara-shadowdom

Ruby gem that adds basic support for the Shadow DOM to Capybara

How to run component tests for a Lit web component with Cypress

cypress-lit

Test your Lit elements and native web components in Cypress with all the modern browsers

Using @web/test-runner for testing web components in a real browser

Locating Shadow DOM elements using Selenium WebDriver in a Maven project

Shadow DOM and open-source testing frameworks

Opinionated package that combines and configures testing libraries

query-selector-shadow-dom

querySelector that can pierce Shadow DOM roots, useful for automated testing

shadow-automation-selenium

Shadow DOM automation using Selenium

In Selenium 4, there is now a way to access Shadow DOM nodes

So you’ve created a native web component or two. How do you test them in popular browsers?

Shadow DOM tree and its interaction with the W3C Webdriver

— With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems

Custom Elements Locator

Chrome extension to find custom elements on a page

UI development environment for plain web-component snippets

Component IDE for web platform developers

web-component-analyzer

CLI that analyzes web components and emits documentation / diagnostics

Web Components Codemods

Codemods for Web Components

Book by Ben Farrell, available at Manning early release program

Book by Cory Rylan, early preview edition available at Leanpub

by

by and

by

by

by

by

by

by and

by

by

by

by

by

by

by

by

Document by Google Chrome team

Feature in Chrome platform status

Feature in Chrome platform status

bruck

Prototyping system built with web components and the Houdini Paint API

Publish, discuss and rate web components

Discuss & share web components

@webcomponents/custom-elements

Custom Elements polyfill by Polymer team

document-register-element

Custom Elements polyfill by Andrea Giammarchi

@corpuscule/custom-builtin-elements

Customized built-in elements polyfill by

@ungap/custom-elements-builtin

Customized built-in elements polyfill by

@webcomponents/shadydom

ShadowDOM v1 shim

@webcomponents/shadycss

ShadowDOM style encapsulation shim

@lwc/synthetic-shadow

Shadow DOM polyfill by

@webcomponents/template

Minimal polyfill for

@ungap/import-node

An polyfill for IE11 by

Created by in 2014

Maintained by since 2018