awesome-web-components

A curated list of awesome Web Components resources.
https://github.com/web-padawan/awesome-web-components

Last synced: 3 days ago
JSON representation

Miscellaneous
- Custom State Pseudo Class
  - webcomponents.org - Discuss & share web components.
  - bruck - Prototyping system built with web components and the Houdini Paint API.
  - Vaadin Directory - Publish, discuss and rate web components
Proposals
- Constructable Stylesheet Objects
  - web-platform-tests
  - Explainer
  - Constructable Stylesheets - Feature in Chrome platform status.
  - Specification Draft
  - Specification Draft
- Custom State Pseudo Class
- Form-associated Custom Elements
  - Form Participation API Explained - Document by Google Chrome team.
  - Form-associated custom elements - Feature in Chrome platform status.
  - web-platform-tests
Real World
- Case Studies
- Component Libraries
  - LRNWebComponents - ELMS:LN produced web components for any project.
  - 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.
  - Lume - Custom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.
  - 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.
  - 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.
  - Wokwi Elements - Web Components for Arduino and various electronic parts.
  - XWeather - Collection of web components implementing portions of the OpenWeatherMap API.
  - Playground Elements - Serverless code experiences with web components.
  - AgnosticUI - A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.
  - Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.
  - Furo Webcomponents - Enterprise ready set of web components which work best with Eclipse Furo.
  - Burnish Components - Web components for rendering MCP tool-call output as UI.
- Components
  - `<active-table>` - Editable table web component.
  - `<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>` - able, SVG-based QR codes.
  - `<range-slider>` - Accessible range slider custom element with keyboard support.
  - `<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 [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements.
  - `<api-viewer>` - API documentation and live playground for Web Components.
  - `<player-x>` - Media player web component.
  - `<rapi-doc>` - Web component for creating documentation from OpenAPI Specification.
  - `<notectl-editor>` - Modern rich text editor with plugin architecture, immutable state, and zero-config framework-agnostic deployment.
  - `<pdfjs-viewer-element>` - Custom element that embeds PDF.js default viewer.
  - `<phantom-ui>` - Skeleton loader that measures your real DOM to render matching shimmer placeholders.
- Design Systems
  - Auro Design System - Alaska Airlines design system to innovate on ideas and collaborate on the future.
  - Blueprint UI - Web Component based design system with flexible and lightweight components.
  - Clarity Core Web Components - Suite of web components from the Clarity 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.
  - Momentum UI Web Components - Set of UI components based on Momentum Design.
  - Nord - Nordhealth’s design system for products, digital experiences and brand.
  - Siemens iX Web Components - Web Components implementing Siemens iX design system.
  - U-M Library Design System - University of Michigan Library Design System.
  - Astro Space UX Design System - Set of components to build rich space app experiences with established interaction patterns.
  - 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.
  - 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.
  - 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.
  - 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.
  - Zooplus web components - Set of web components that implement Z+ shop style guide.
  - Calcite Components - Shared Web Components for Esri's Calcite design framework.
  - Crayons - Collection of web components that adheres to the Freshworks Design System.
  - Lyne Components - Building blocks of the Lyne Design System are based on Web Components.
  - NuML | NUDE Elements - HTML Framework and Design System based on Web Components and runtime CSS generation.
  - FAST Components - Library of Web Components based on the FAST design language.
  - Momentum UI Web Components - Set of UI components based on Momentum Design.
  - NVIDIA Elements - The Design Language and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.
- Use Cases
Standards

Programming Languages

JavaScript 71 TypeScript 55 HTML 9 CSS 3 Java 1 Ruby 1 Svelte 1 Twig 1 Bikeshed 1

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-web-components

Miscellaneous

Custom State Pseudo Class

Proposals

Constructable Stylesheet Objects

Custom State Pseudo Class

Form-associated Custom Elements

Real World

Case Studies

Component Libraries

Components

Design Systems

Use Cases

Standards

CSS Shadow Parts

Custom Elements

HTML Templates

Shadow DOM