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: Aug. 7, 2022, 6:08 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

819
138
10m
BSD-3-Clause

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

1.13K
119
1y 10m
ISC

Customized Built-in Elements polyfills

A full-featured polyfill for customized built-in elements

14
1
1y 11m
MIT

A polyfill for Custom Elements builtin extends

99
10
1y 94d
ISC

Shadow DOM shims

Web Components Polyfills

819
138
10m
BSD-3-Clause

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

1.09K
236
9m
MIT

HTML Templates polyfills

Web Components Polyfills

819
138
10m
BSD-3-Clause

An importNode polyfill for IE11 and other legacy browsers

7
0
2y 68d
ISC

Accessibility

Best Practices

Codelabs

Examples

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

409
23
10m
MIT

Literate code examples for common UI patterns.

806
72
10m
Apache-2.0

Vanilla JS UI component library of HTML deprecated tags.

9
1
1y 11m
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.89K
547
1y 58d
CC0-1.0

Architecture

Interoperability

Limitations

Styling

Case Studies

Components

API documentation and live playground for Web Components

154
12
9m
MIT

A <chess-board> web component

74
10
10m
n/a

🎨 A web component for drawing patterns with CSS.

3.85K
159
9m
MIT

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

721
42
10m
Apache-2.0

A lightweight emoji picker for the modern web

714
29
10m
Apache-2.0

A modal web component

76
6
1y 10m
MIT

Web component file viewer

17
2
12m
n/a

Web Component to visualize JSON data in a tree view

28
6
1y 17d
MIT

A faster youtube embed.

3.66K
156
9m
n/a

🎹 Play and display MIDI files on the web

218
12
9m
BSD-2-Clause

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

3.55K
418
9m
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, api.video.

35
5
9m
n/a

⚡️ <progressive-image> custom element

241
12
9m
MIT

🍬 <range-slider> custom element

36
4
9m
MIT

RapiDoc - Custom-Element for OpenAPI Spec

734
147
9m
MIT

A friendly web-component for writing and rendering shaders.

399
25
10m
MIT

A rich text editor for everyday writing

16.65K
994
10m
MIT

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

1.85K
79
10m
MIT

A custom elements wrapper around the web-vitals lib.

148
6
11m
MIT

Component Libraries

The AMP web component framework.

14.74K
3.89K
9m
Apache-2.0

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

328
20
9m
ISC

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

74
12
9m
n/a

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

25
3
1y 90d
n/a

Atoms for Blaze UI

1.5K
114
10m
n/a

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

22
16
9m
Apache-2.0

Collection of Web Components by Clever Cloud

110
13
9m
Apache-2.0

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

125
17
5m
MIT

A collection of v1 custom elements.

26
9
10m
Apache-2.0

GitHub's Web Component collection.

2K
43
1y 109d
MIT

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

607
36
9m
MIT

Immersive Custom Elements

130
6
2y 8m
MPL-2.0

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

115
8
6m
MIT

A compilation of Joomla 4 Custom Elements.

23
26
11m
GPL-2.0

Components for web applications

7
9
9m
Apache-2.0

Fundamental white label web component features for your design system.

1.19K
204
9m
MIT

@lrnwebcomponents Monorepo for NPM based element definitions

186
66
9m
Apache-2.0

Create 3D web applications with HTML. Bring a new depth to your DOM!

597
32
9m
MIT

Authentication Providers and UI components for Microsoft Graph 🦒

616
164
9m
n/a

Data visualisation web components for the life sciences.

56
17
9m
MIT

Nuxeo web components

22
12
9m
n/a

A suite of web components for creating business applications.

9
0
10m
MIT

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

18
7
9m
n/a

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

5.75K
327
9m
MIT

Web Components & Custom Elements for Professional Web Applications

198
26
9m
n/a

Web components used by TEI Publisher and apps generated by it

7
10
9m
GPL-3.0

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

11
11
9m
n/a

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

111
24
9m
n/a

WarpView Elements for Warp 10

5
2
9m
n/a

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

8.8K
312
9m
MIT

Web Components for Electronics and IoT Parts

54
17
9m
MIT

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

5
0
1y 10m
n/a

Design Systems

Web Components implementation of the Amber Design System.

27
2
10m
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.

222
37
9m
MIT

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

140
43
9m
n/a

Carbon Design System variant on top of Web Components

252
54
9m
Apache-2.0

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

23
8
11m
MIT

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

6.35K
738
9m
MIT

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

66
25
9m
MIT

The adaptive interface system for modern web experiences.

6.39K
380
9m
MIT

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

12.87K
2.12K
5m
n/a

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

3
1
1y 6m
MIT

Web Component library for the Helix Design System

43
26
11m
n/a

🧪 Experimental base components for Lyne Design System

7
2
9m
MIT

Material Design Web Components

2.77K
409
9m
Apache-2.0

Atomic UI Framework based on Web Components and Runtime CSS Generation for rapidly building interfaces that follow your Design System 🌈

285
13
9m
MIT

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

246
57
9m
MIT

Spectrum Web Components

485
83
9m
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.

1.01K
161
9m
Apache-2.0

We aim to build trust in our digital services by creating components and standards that are reusable, equitable, informed by research, and available to the public.

5
3
9m
MIT

Web-components library.

35
10
9m
MIT

Use Cases

Class Based

Lightweight framework based on WebComponents and decorators

28
0
1y 11m
MIT

🧬 Progressive Web Components.

25
0
9m
MIT

The adaptive interface system for modern web experiences.

6.39K
380
9m
MIT

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

1.09K
236
9m
MIT

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

12.11K
1.2K
9m
n/a

Web Components + Virtual DOM: web standards for powerful UIs

216
23
9m
n/a

Effortless custom elements powered by modern view libraries.

3.22K
161
10m
MIT

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

835
58
9m
MIT

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

9.77K
631
9m
n/a

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.

541
14
9m
MIT

Functional

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

575
23
9m
MIT

Functional Component like React, but for Web Components.

68
2
12m
MIT

React's Hooks API implemented for web components 👻

2.16K
85
9m
BSD-2-Clause

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

2.48K
77
9m
MIT

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

11.88K
295
9m
MIT

Integrations

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

15
2
1y 114d
MIT

Wrap your component up as a custom element

247
37
12m
MIT

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

91
14
9m
Apache-2.0

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

1.03K
66
10m
MIT

Use Web Components with React

124
9
1y 10d
MIT

Mount React components to the DOM using custom elements

559
20
10m
MIT

Simple API to create vanilla custom elements with riot

30
2
1y 28d
MIT

Benchmarks

Angular

React

Vue

Svelte

Starter Kits

Boilerplate for creating a custom element.

128
24
1y 18d
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.

15
0
9m
MIT

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

113
6
9m
MIT

Tools

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

30
3
12m
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

141
17
12m
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.

62
13
1y 34d
Apache-2.0

Utils for querying shadow DOM

4
0
1y 58d
MIT

CLI that analyzes web components and emits documentation

358
54
9m
MIT

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

6
0
9m
MIT

Books

Tutorials

Podcasts

Presentations

Talks

Usage Metrics

Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects

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

3.51K
2.48K
9m
n/a

API for constructing CSS stylesheet objects

124
27
1y 97d
n/a

Miscellaneous

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

479
14
3y 4m
n/a

2019

2018

2017

2016

2015

2014

2013

2012

2011