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: Nov. 24, 2020, 6:07 p.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
83d
BSD-3-Clause

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

1.12K
122
49d
ISC

Customized Built-in Elements polyfills

A full-featured polyfill for customized built-in elements

12
1
8m
MIT

A polyfill for Custom Elements builtin extends

95
10
112d
ISC

Shadow DOM shims

Web Components Polyfills

522
103
83d
BSD-3-Clause

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

899
189
6d
MIT

HTML Templates polyfills

Web Components Polyfills

522
103
83d
BSD-3-Clause

An importNode polyfill for IE11 and other legacy browsers

6
0
6m
ISC

Accessibility

Best Practices

Codelabs

Examples

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

273
12
34d
MIT

Literate code examples for common UI patterns.

775
67
3y 47d
Apache-2.0

Vanilla JS UI component library of HTML deprecated tags.

8
1
1y 26d
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.37K
397
6m
CC0-1.0

Collection of best practices and design patterns for developing web components.

Architecture

Interoperability

Limitations

Styling

Case Studies

Components

API documentation and live playground for Web Components

114
8
74d
MIT

A web component

59
5
81d
n/a

🎨 A web component for drawing patterns with CSS.

3.17K
131
8d
MIT

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

490
29
57d
Apache-2.0

A lightweight emoji picker for the modern web

462
15
19d
Apache-2.0

A modal web component

31
2
86d
MIT

Web component file viewer

7
1
4m
n/a

Web Component to visualize JSON data in a tree view

9
2
75d
MIT

A faster youtube embed.

2.74K
98
4d
n/a

🎹 Play and display MIDI files on the web

114
1
4d
BSD-2-Clause

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

2.28K
274
5d
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
63d
n/a

⚡️ custom element

227
11
15d
MIT

🍬 custom element

22
0
15d
MIT

RapiDoc - Custom-Element for OpenAPI Spec

351
77
8d
MIT

A friendly web-component for writing and rendering shaders.

340
21
76d
MIT

A rich text editor for everyday writing

15.65K
832
6d
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
55d
MIT

A custom elements wrapper around the web-vitals lib.

75
3
84d
MIT

Component Libraries

The AMP web component framework.

13.9K
3.66K
5d
Apache-2.0

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

243
12
14d
ISC

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

51
11
7d
n/a

‹b› Custom elements and view presenters using lit-html and lit-element

8
2
8d
n/a

Atoms for Blaze UI

1.48K
116
9d
n/a

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

11
15
5d
Apache-2.0

Collection of Web Components by Clever Cloud

61
3
5d
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.

84
11
2d
MIT

A collection of v1 custom elements.

23
7
6d
Apache-2.0

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

504
35
15d
MIT

Immersive Custom Elements

129
5
12m
MPL-2.0

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

62
3
85d
MIT

A compilation of Joomla 4 Custom Elements.

22
21
79d
GPL-2.0

Components for web applications

6
6
5d
Apache-2.0

Lion Web Components

923
151
6d
MIT

@lrnwebcomponents Monorepo for NPM based element definitions

153
46
4d
Apache-2.0

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

328
22
45d
n/a

Collection of web components for Microsoft Graph 🦒

462
98
5d
n/a

Data visualisation web components for the life sciences.

33
9
16d
MIT

Nuxeo web components

16
11
6d
Apache-2.0

A suite of web components for creating business applications.

6
0
71d
MIT

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

13
3
8d
n/a

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

4.33K
222
5d
MIT

Web Components & Custom Elements for Professional Web Applications

62
9
10d
n/a

Web components used by TEI Publisher and apps generated by it

3
4
5d
GPL-3.0

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

12
8
5d
n/a

An evolving set of open source web components for building mobile and desktop web applications in modern browsers.

400
46
16d
n/a

WarpView Elements for Warp 10

3
2
6d
n/a

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

8.38K
287
5m
MIT

Web Components for Electronics and IoT Parts

22
9
74d
MIT

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

4
0
56d
n/a

Design Systems

Web Components implementation of the Amber Design System.

21
1
9m
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.

175
35
5d
MIT

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

77
26
5d
n/a

Carbon Design System variant on top of Web Components

134
29
6d
Apache-2.0

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

20
7
107d
MIT

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

6.1K
675
57d
n/a

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

45
11
21d
MIT

The adaptive interface system for modern web experiences.

4.67K
216
84d
MIT

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

9.82K
1.75K
4d
n/a

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

2
0
111d
MIT

Web Component library for the Helix Design System

35
24
7d
n/a

🧪 Experimental base components for Lyne Design System

1
2
22d
MIT

Material Design Web Components

2.26K
355
5d
Apache-2.0

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

210
9
8d
MIT

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

156
46
5d
MIT

A library of pearson web components

10
4
9d
n/a

Spectrum Web Components

248
36
4d
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.

813
129
3d
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.

1
0
29d
n/a

Web-components library.

29
8
24d
MIT

Use Cases

Class Based

Lightweight framework based on WebComponents and decorators

27
0
11m
MIT

Progressive Web Components.

21
1
5d
MIT

The adaptive interface system for modern web experiences.

4.67K
216
84d
MIT

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

899
189
6d
MIT

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

11.48K
1.1K
15d
n/a

Web Components + Virtual DOM: web standards for powerful UIs

200
19
85d
n/a

Effortless custom elements powered by modern view libraries.

3.16K
162
1y 20d
MIT

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

765
51
1y 72d
MIT

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

8.57K
544
6d
n/a

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

195
7
13d
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.

447
20
27d
n/a

Functional Component like React, but for Web Components.

48
3
104d
MIT

React's Hooks API implemented for web components 👻

1.81K
70
26d
BSD-2-Clause

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

2.04K
61
9d
MIT

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

4.37K
117
21d
MIT

Integrations

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

11
1
4m
MIT

Wrap your component up as a custom element

192
25
75d
MIT

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

86
13
7m
Apache-2.0

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

899
58
7d
MIT

Use Web Components with React

95
7
4m
MIT

Mount React components to the DOM using custom elements

510
14
5m
MIT

Simple API to create vanilla custom elements with riot

24
2
4d
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.

102
18
5m
MIT

A simple starter 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
3d
MIT

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

107
6
5d
MIT

Tools

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

29
3
48d
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

88
11
47d
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.

40
11
35d
Apache-2.0

CLI that analyzes web components and emits documentation

265
40
83d
MIT

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

3
0
6d
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
83d
n/a

Custom State Pseudo class

Constructable Stylesheet Objects

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

2.97K
2.08K
83d
n/a

API for constructing CSS stylesheet objects

111
21
99d
n/a

Miscellaneous

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

475
14
1y 7m
n/a

Publish, discuss and rate web components

Discuss & share web components.

2019

2018

2017

2016

2015

2014

2013

2012

2011