User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome Web Components

This is a guide intended to introduce to Web Components. Everyone can contribute here!

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: Oct. 27, 2021, 12:07 a.m.

Thank you mateusortiz & contributors
View Topic on GitHub:
mateusortiz/webcomponents-the-right-way

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Introduction

Custom Elements

Shadow DOM

HTML Templates

CSS Shadow Parts

Custom Elements polyfills

Web Components Polyfills

522
103
1y 54d
BSD-3-Clause

A stand-alone working lightweight version of the W3C Custom Elements specification

1.12K
122
1y 20d
ISC

Customized Built-in Elements polyfills

A full-featured polyfill for customized built-in elements

12
1
1y 7m
MIT

A polyfill for Custom Elements builtin extends

97
10
9m
ISC

Shadow DOM shims

Web Components Polyfills

522
103
1y 54d
BSD-3-Clause

LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation

955
206
8m
MIT

HTML Templates polyfills

Web Components Polyfills

522
103
1y 54d
BSD-3-Clause

An importNode polyfill for IE11 and other legacy browsers

6
0
1y 5m
ISC

Accessibility

Best Practices

Codelabs

Examples

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

338
19
8m
MIT

Literate code examples for common UI patterns.

783
69
4y 18d
Apache-2.0

Vanilla JS UI component library of HTML deprecated tags.

8
1
1y 12m
AGPL-3.0

A series of web components examples, related to the MDN web components documentation at https://developer.mozilla.org/en-US/docs/Web/Web_Components.

1.5K
440
1y 5m
CC0-1.0

Architecture

Interoperability

Limitations

Styling

Case Studies

Components

API documentation and live playground for Web Components

121
8
1y 45d
MIT

A <chess-board> web component

63
8
1y 52d
n/a

🎨 A web component for drawing patterns with CSS.

3.4K
142
8m
MIT

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:

540
35
10m
Apache-2.0

A lightweight emoji picker for the modern web

560
16
9m
Apache-2.0

A modal web component

31
2
1y 57d
MIT

Web component file viewer

9
1
1y 93d
n/a

Web Component to visualize JSON data in a tree view

10
3
1y 46d
MIT

A faster youtube embed.

2.92K
113
9m
n/a

🎹 Play and display MIDI files on the web

152
4
8m
BSD-2-Clause

Easily display interactive 3D models on the web and in AR!

2.61K
319
8m
Apache-2.0

Media Player Web Component - Uniform Player API - Video QoE benchmark - Supports raw media files, HLS, Dash, Vimeo, YouTube, JW Player, Wistia, SoundCloud, Twitch, Dailymotion, Facebook, Vidyard, Brightcove, Streamable.

10
1
1y 34d
n/a

⚡️ <progressive-image> custom element

229
11
8m
MIT

🍬 <range-slider> custom element

26
3
8m
MIT

RapiDoc - Custom-Element for OpenAPI Spec

411
84
8m
MIT

A friendly web-component for writing and rendering shaders.

351
21
1y 47d
MIT

A rich text editor for everyday writing

15.93K
870
9m
MIT

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...

985
22
1y 26d
MIT

A custom elements wrapper around the web-vitals lib.

93
4
9m
MIT

Component Libraries

The AMP web component framework.

14.02K
3.75K
8m
Apache-2.0

🚀🌛 Use the Launch Platform 👩‍🚀👨‍🚀

272
13
8m
ISC

AXA CH UI components library. Please share, comment, create issues and work with us!

54
10
8m
n/a

‹b› Web components for creating applications – built by Blackstone Publishing using lit-html and lit-element

13
3
8m
n/a

Atoms for Blaze UI

1.49K
114
11m
n/a

A collection of accessible, free, open-source web components for building Brightspace applications.

13
14
8m
Apache-2.0

Collection of Web Components by Clever Cloud

69
6
9m
Apache-2.0

🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

94
13
8m
MIT

A collection of v1 custom elements.

23
7
11m
Apache-2.0

GitHub's Web Component collection.

1.14K
30
6m
MIT

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

531
35
8m
MIT

Immersive Custom Elements

131
6
1y 11m
MPL-2.0

Components for interactive scientific writing, reactive documents and explorable explanations.

73
4
8m
MIT

A compilation of Joomla 4 Custom Elements.

22
21
1y 50d
GPL-2.0

Components for web applications

7
7
8m
Apache-2.0

Lion Web Components

1.02K
166
8m
MIT

@lrnwebcomponents Monorepo for NPM based element definitions

161
48
8m
Apache-2.0

Create CSS3D/WebGL applications declaratively with HTML. Give regular DOM elements shadow and lighting.

434
27
8m
n/a

Authentication Providers and UI components for Microsoft Graph 🦒

507
112
8m
n/a

Data visualisation web components for the life sciences.

39
11
9m
MIT

Nuxeo web components

17
13
8m
Apache-2.0

A suite of web components for creating business applications.

7
0
8m
MIT

Pixano Elements - Re-usable web components dedicated to data annotation tasks.

14
3
8m
n/a

A collection of professionally designed, every day UI components built on a framework-agnostic technology. 🥾

4.72K
254
8m
MIT

Web Components & Custom Elements for Professional Web Applications

91
13
8m
n/a

Web components used by TEI Publisher and apps generated by it

4
5
8m
GPL-3.0

Tradeshift Elements - Reusable Tradeshift UI Components as Web Components https://tradeshift.github.io/elements

12
10
8m
n/a

An evolving set of high-quality web components for business applications. Part of Vaadin 20+

26
1
5m
n/a

WarpView Elements for Warp 10

4
2
8m
n/a

Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

8.47K
292
1y 4m
MIT

Web Components for Electronics and IoT Parts

28
12
8m
MIT

A collection of Web Components implementing portions of the OpenWeatherMap API.

4
0
1y 27d
n/a

Design Systems

Web Components implementation of the Amber Design System.

21
1
1y 8m
MIT

The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.

184
36
8m
MIT

Web Components for the Calcite Design System. Built with Stencil JS. Currently in Beta!

93
27
8m
n/a

Carbon Design System variant on top of Web Components

164
40
8m
Apache-2.0

Chameleon Web Components - A collection of lightweight, unidirectional, framework-agnostic elements based on the Chameleon Design System

21
7
1y 78d
MIT

UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

6.18K
692
8m
n/a

🖍️ Crayons - A UI Kit comprising of web components for building Freshworks Apps!

51
11
8m
MIT

The adaptive interface system for modern web experiences.

4.67K
216
1y 55d
MIT

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

10.9K
1.85K
8m
n/a

A set of encapsulated Web components consuming the GOV.UK Design System.

2
0
1y 82d
MIT

Web Component library for the Helix Design System

35
24
8m
n/a

🧪 Experimental base components for Lyne Design System

2
2
8m
MIT

Material Design Web Components

2.41K
370
8m
Apache-2.0

An open-source Library of Web Components and a Runtime CSS Framework for rapidly building UI that follows your Design System.

225
11
8m
MIT

PatternFly Elements. A set of community-created web components based on PatternFly design.

168
49
8m
MIT

A library of pearson web components

10
4
10m
n/a

Spectrum Web Components

301
45
8m
Apache-2.0

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.

864
137
8m
n/a

Our design system is for web teams to reuse common solutions, make contributions, and learn from one another to help build accessible, inclusive, and high-quality websites.

2
0
8m
n/a

Web-components library.

32
8
8m
MIT

Use Cases

Class Based

Lightweight framework based on WebComponents and decorators

28
0
1y 10m
MIT

Progressive Web Components.

22
1
9m
MIT

The adaptive interface system for modern web experiences.

4.67K
216
1y 55d
MIT

LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation

955
206
8m
MIT

Front End Cross-Frameworks Framework - 前端跨框架跨平台框架

11.71K
1.13K
10m
n/a

Web Components + Virtual DOM: web standards for powerful UIs

204
20
8m
n/a

Effortless custom elements powered by modern view libraries.

3.19K
160
1y 11m
MIT

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

786
53
2y 43d
MIT

A Web Component compiler for building fast, reusable UI components and static site generated Progressive Web Apps

8.94K
568
9m
n/a

A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.

256
9
8m
MIT

Simple base class for creating fast, lightweight web components. Part of the Polymer Project.

Original web component library by the Polymer Project authors.

Functional

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

473
20
8m
MIT

Functional Component like React, but for Web Components.

54
2
1y 75d
MIT

React's Hooks API implemented for web components 👻

1.86K
79
12m
BSD-2-Clause

The simplest way to create web components from plain objects and pure functions! 💯

2.12K
64
8m
MIT

A declarative, efficient, and flexible JavaScript library for building user interfaces.

4.37K
117
11m
MIT

Integrations

The easiest way to render parts of your Ember app using custom elements.

12
1
9m
MIT

Wrap your component up as a custom element

208
27
1y 46d
MIT

This projects automates the wrapping of a React component in a CustomElement.

88
13
1y 6m
Apache-2.0

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

938
59
9m
MIT

Use Web Components with React

104
9
1y 111d
MIT

Mount React components to the DOM using custom elements

521
19
1y 4m
MIT

Simple API to create vanilla custom elements with riot

26
2
11m
MIT

Benchmarks

Benchmark Web Components technologies with various examples.

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

Angular

React

Vue

Svelte

Starter Kits

Boilerplate for creating a custom element.

106
19
1y 4m
MIT

A simple starter <hello-world /> web component written in typescript, using lit-html and lit-element. Unit tested with jest and e2e tested with puppeteer and jest-puppeteer.

12
0
8m
MIT

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

110
6
8m
MIT

Tools

Chrome extension to find custom elements on a page, and search the catalog for extra information

29
3
1y 19d
n/a

querySelector that can pierce Shadow DOM roots without knowing the path through nested shadow roots. Useful for automated testing of Web Components. Production use is not advised, this is for test environments/tools such as Web Driver, Playwright, Puppeteer

108
14
8m
MIT

This project focuses on automation of multi-level shadow root dom using java selenium. You can embed this plugin in your java selenium project.

46
12
9m
Apache-2.0

Utils for querying shadow DOM

2
0
10m
MIT

CLI that analyzes web components and emits documentation

285
41
1y 54d
MIT

Codemods for Web Components. Breaking changes? Don't panic :)

3
0
10m
MIT

UI development environment for plain web-component snippets.

Your studio for Web Components.

Books

Tutorials

Guideline from Google about creating good mobile web experiences.

Podcasts

Presentations

Talks

Usage Metrics

Form-associated Custom Elements

Test suites for Web platform specs — including WHATWG, W3C, and others

2.97K
2.08K
1y 54d
n/a

Custom State Pseudo class

Constructable Stylesheet Objects

Test suites for Web platform specs — including WHATWG, W3C, and others

2.97K
2.08K
1y 54d
n/a

API for constructing CSS stylesheet objects

111
21
1y 70d
n/a

Miscellaneous

A prototyping system built with web components and the Houdini Paint API

476
14
2y 6m
n/a

Publish, discuss and rate web components

Discuss & share web components.

2019

2018

2017

2016

2015

2014

2013

2012

2011