awesome-web-components
A curated list of web components libraries and resources
https://github.com/zedix/awesome-web-components
Last synced: 4 days ago
JSON representation
-
Drafts, Reviews & Explainers
- Cross-root ARIA
- my-element:--my-state custom state pseudo class
- Declarative Shadow DOM (DSD)
- Server-Side Rendering (SSR) API
- #1009 Capabilities needed and open questions
- #939 Declarative Adopted Stylesheets
- Can I use `shadowrootmode`?
- Chrome 90 (`shadowroot` — non-standard)
- Bugzilla #1712140
- Safari Technology Preview 162
- Streaming DSD: Chromium Intent to Ship
- Form-associated custom elements (attachInternals)
- HTML Living Standard
- FF 98
- Creating Custom Form Controls with ElementInternals
- Shadow DOM Delegate Focus
- CSSOM Constructable Stylesheet Objects
- CSS Custom States (Chromium)
- Chrome 90
- This feature is not (yet) a standard
- Custom Attributes Proposal
- DCE Demo Discussions
- DCE Proposal
- CSSOM Constructable Stylesheet Objects
- Chrome 111 (`shadowrootmode` — standardized)
- DCE Demo Discussions
- Lazy Custom Element Definitions (Proposal)
- Custom Attributes (Identified)
-
Libraries for building web components
-
Web Components UI Libraries
-
Design Systems build with Web Components
- Repository
- Repository
- AXA Pattern Library
- Repository
- Repository
- Telekom Scale Design System
- Repository
- Adobe Spectrum Design System
- Storybook
- Astro Space Design System
- Auro Design System by Alaska Airlines
- Storybook
- Storybook
- Duet Design System by LocalTapiola
- Freshworks Crayons Design System
- IBM Carbon Design System
- Storybook
- React
- _button.scss
- Microsoft Fluent UI
- Fast
- React
- MixPanel Design System
- Nord Design System
- Porsche Design System
- Repository
- Red Hat Design System
- VMware Clarity Design System
- Volkswagen GroupUI Design System
- Repository
- General Electric Edison™ Design System
- Repository
- AXA Pattern Library
-
Sites using Lit elements
- VSCode
- ChromeDevTools - button>`)
- TikTok - settings-modal>`)
- Figma
- SpaceX
- Shopify - nav-menu>`)
- Adobe Firefly
- Firefox
- Google Maps API - map>`)
- ChromeDevTools - button>`)
- TikTok - settings-modal>`)
- Figma
- Adobe Firefly
-
Routers (URL Pattern Standard)
-
Reactivity / State across multiple components (TC39 Signals)
-
Stores
-
Widgets / Standalone elements
-
Resources
-
Latest Articles
- 2023-11-18 — An Attempted Taxonomy of Web Components
- 2023-10-25 — Web Components Tailwind And SSR
- 2023-08-23 — Pros and cons of using Shadow DOM and style encapsulation
- 2023-08-18 — Shadow DOM: Not by Default
- 2023-08-12 — Shadow Themes
- 2023-08-07 — SEO and Web Components - 2023 Edition
- 2023-07-20 — Hacker News Lit: Simple, fast web components
- 2023-07-19 — Dynamic Slots
- 2023-06-28 — If Web Components are so great, why am I not using them?
- 2023-03-27 — Debunking Web Component Myths and Misconceptions
- 2021-05-26 — Links on Web Components
- 2021-05-15 — Container Queries in Web Components
- 2020-03-27 — The bright future of Web Components
- 2020-02-07 — Web Components Basics and Performance Benefits
- 2024-01-31 — The Good, The Bad, The Web Components
- 2023-07-23 — `handleEvent()` is Mindblowing - [Tip](https://x.com/chrisshank23/status/1776018476249018686)
- 2023-05-10 — How To Hydrate A Server-Side Rendered Web Component
- 2018-09-06 — GitHub is using custom elements for their modal dialogs, autocomplete and display time.
- 2017-03-14 — Brief, incomplete, and mostly incorrect history of Web Components
- 2024-01-12 — A Modest Web Components Styling Proposal: An “I Know What I’m Doing” Selector
- 2023-08-13 — Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component
- 2024-08-20 — Server-first Web Components with DSD, HTMX, and Islands
- 2024-04-16 — A (probably not) unbiased critique of Web Components, among other things
- 2024-01-17 — Web Components 2024 Winter Update
- 2024-09-27 — Web Components Are Not the Future — They’re the Present
- 2024-09-27 — Web Components Are Not the Future
- 2024-09-29 — "Web Components" Are Not A Feature - It's an umbrella term
- 2024-09-28 — Web components are okay
- 2023-09-21 — The design system ecosystem
- 2023-11-27 — Web Components Eliminate JavaScript Framework Lock-in
- 2023-11-17 — HTML Web Components are Just JavaScript?
- 2023-11-15 — Step into the light (DOM)
- 2023-11-09 — HTML web components - nielsen.com/2023/html-web-components/)"
- 2023-10-25 — Web Components Will Outlive Your JavaScript Framework
- 2023-09-09 — W3C Web Sustainability Guidelines (WSG) 1.0
- 2023-02-13 — Hello Web Components
- 2022-10-21 — Let’s talk about web components
- 2019-11-07 — The Firefox UI is now built with Web Components
- 2019-04-08 — A history of the HTML slot element
- 2024-10-09 —Reactive State with Signals in Lit
- 2024-10-01 — Web Components are not Framework Components — and That’s Okay
- 2024-02-01 — Using Global Styles in Shadow DOM
- 2023-08-23 — Use web components for what they’re good at
- 2023-03-09 — Faster dashboards with web components
- 2024-05-28 — Introducing WebUI 2.0
- 2024-05-24 — Introducing the Fabric UX System
- 2023-10-25 — Web Components Tailwind And SSR
- 2023-02-17 — Declarative Shadow DOM: One shadow per root ⭐
-
Latest Talks
- 2023-06-20 — State of Web Components June 2023 - "Shoelace and DS are a very easy win in most cases"
- 2023-07-06 — The Good, The Bad, and The Web Components - Zach Leatherman | JSHeroes 2023
- 2023-06-09 — Shining Light on the Shadow DOM | Cassondra Roberts | CSS Day 2023
- 2023-06-20 — State of Web Components June 2023 - "Shoelace and DS are a very easy win in most cases"
-
Latest Podcasts
-
Performance
-
Specifications
- specifications
- Form Associated Custom Elements (Fully Supported)
- CSS Scoping
- CSS Shadow Parts
- JSON - pages/proposals/css-modules-v1-explainer.md), [HTML](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md) Modules
- DOM Standard › Shadow DOM
- HTML Standard › HTML Templates
-
Latest Meeting Notes
-
Sites build entirely with Web Components
- MSN
- Fluent UI Web Components based on FAST
- Reddit - mod-comment](https://sh.reddit.com/)) Lit
- Bing
- British Gas
- Photoshop for Web
- Ideanote
- Simplr
- ViteMaDose
- YouTube - video-preview>`)
- App Store for Windows
- ditched its old React codebase
- CSS Findings From Photoshop Web Version
- Photoshop is now on the web!
- Reddit - mod-comment](https://sh.reddit.com/)) Lit
-
Frameworks
- Rocket
- Eleventy with WebC
- Introduction to WebC
- Appolo Elements
- CrossBow - components.
- Hybrids
- Gracile
- Tini
- Enhance (SSR First) - 02-23-enhancing-fwas-with-web-components) + [Enhance Movies Showcase (3.9 kb JS compressed)](https://begin.com/blog/posts/2023-07-26-introducing-enhance-movie) – Enhance provides file-based routing, reusable Custom Elements, a customizable utility CSS system, and mapped API data routes that get deployed to isolated, single-purpose cloud functions, no build steps to configure.
- Brisa - web-components-with-ssr)
-
Accessibility
-
History
Programming Languages
Categories
Latest Articles
48
Design Systems build with Web Components
33
Drafts, Reviews & Explainers
28
Web Components UI Libraries
18
Sites build entirely with Web Components
15
Sites using Lit elements
13
Libraries for building web components
10
Frameworks
10
Resources
10
Specifications
7
Widgets / Standalone elements
6
Reactivity / State across multiple components (TC39 Signals)
5
Accessibility
4
Latest Talks
4
Routers (URL Pattern Standard)
4
Latest Podcasts
2
Performance
1
Latest Meeting Notes
1
Stores
1
History
1
Sub Categories
Keywords
web-components
15
webcomponents
10
design-system
7
lit-html
7
lit-element
4
javascript
4
monorepo
3
custom-elements
3
stenciljs-components
3
stenciljs
3
typescript
3
react
3
components
3
component-library
3
ui
2
vaadin
2
design-systems
2
styleguide
2
hooks
2
html
2
ui-components
2
storybook
2
ui-toolkit
2
sketch-generation
2
polyfills
2
lerna
2
microsoft
1
fluent
1
office-ui-fabric
1
react-components
1
devxeng
1
mgt
1
mgt-react
1
microsoft-graph
1
microsoft-graph-toolkit
1
microsoft-teams
1
msal
1
people-picker
1
person-card
1
sharepoint
1
accessibility
1
adaptive-ui
1
animation-library
1
color-library
1
component-architecture
1
design-architecture
1
development-tools
1
front-end-framework
1
web-accessibility
1
web-components-schemas
1