Courses & TutorialsProgramming

Awesome Web Components – Massive Collection of Resources

Spread the love

Web Components the Right Way

A curated list of awesome Web Components resources.

Web Components — a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.


Web Components the Right Way was made with love by Mateus Ortiz and maintained by Serhii Kulykov



Custom Elements

Custom Elements provide a way for authors to build their own fully-featured DOM elements.

Shadow DOM

Shadow DOM describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.

HTML Templates

<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

CSS Shadow Parts

CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.


Custom Elements polyfills

Customized Built-in Elements polyfills

Shadow DOM shims

HTML Templates polyfills



Best Practices



  • 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.
  • open-wc code examples – 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.






Real World

Case Studies


  • <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.
  • <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.
  • <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.
  • <trix-editor> – Rich text editor custom element for everyday writing.
  • <vime-player> – Customizable, extensible, accessible and framework agnostic media player.
  • <web-vitals> – Bring web vitals quickly into your page using custom elements.

Component Libraries

  • AMP – Web component framework for easily creating user-first websites, stories, ads, emails and more.
  • 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.
  • DataFormsJS – Standalone Components for SPA routing, displaying data from web services, and more.
  • elements-sk – Collection of custom elements for “a la carte” web development.
  • Elix – High-quality, customizable web components for common user interface patterns.
  • Immersive Custom Elements – Set of web components for embedding immersive (VR & AR) content.
  • Iooxa – Web components for interactive scientific writing, reactive documents and explorable explanations.
  • Joomla UI custom elements – Compilation of Joomla 4 Custom Elements.
  • Ketch.UP – Web components library for Sme.UP.
  • 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.
  • Microsoft Graph Toolkit – Collection of web components for the Microsoft Graph.
  • Nightingale – Data visualisation web components for the life sciences.
  • Nuxeo Elements – Components for building web applications with Nuxeo using Web Components.
  • 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.
  • Shoelace – A forward-thinking library of web components.
  • Smart Web Components – Web components for business applications.
  • TEI Publisher Components – Collection of web components used by TEI Publisher and apps generated by it.
  • Tradeshift Elements – Reusable Tradeshift UI Components as Web Components.
  • Vaadin components – Evolving set of high-quality web components for building business web applications.
  • Warp View – Collection of charting web components for Warp 10.
  • 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.

Design Systems

Use Cases


Class Based

  • Corpuscule – Small Web Components framework based on decorators.
  • DNA – Progressive Web Components library.
  • FAST Element – Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
  • LitElement – Simple base class for creating fast, lightweight web components. Part of the Polymer Project.
  • 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.
  • Polymer – Original web component library by the Polymer Project authors.
  • Skate – Web component library focusing on a functional rendering pipeline and a small footprint.
  • 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.


  • atomico – Small library for the creation of interfaces based on web components using functions and hooks.
  • fuco – Functional component like React, but for Web Components.
  • haunted – React’s Hooks API implemented for web components.
  • hybrids – UI library for creating Web Components with simple and functional API.
  • Solid – Declarative JavaScript library for creating user interfaces.









Starter Kits








Usage Metrics


Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects


  • bruck – Prototyping system built with web components and the Houdini Paint API.
  • Vaadin Directory – Publish, discuss and rate web components
  • – Discuss & share web components.


The articles below represent a long story of the Web Components specifications on the way towards the standardization.
Some of them refer to earlier, so-called “v0” Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec.
These materials are here for historical reasons only, they are grouped by years and listed in chronological order.










Who To Follow



Justin Fagnani

Viljami Salminen

Jan Miksovsky

Serhii Kulykov

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button