awesome-web-components
github.com/web-padawan/awesome-web-components ↗A curated list of awesome Web Components resources.
Use this list with your AI agent
Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:
"Show me react resources from awesome-web-components"
Installation instructions →What's inside
Frameworks
- 3 Approaches to Integrate React with Custom ElementsReact
- Angular Elements OverviewAngular
- Building and consuming Angular Elements as Web ComponentsAngular
- Building Interoperable Web Components That Even Work With ReactReact
- How to Create a Web Component in SvelteSvelte
- How to use Angular ngModel and ngForms with WebComponentsAngular
Real World
- 5 Reasons Web Components Are Perfect for Design SystemsUse Cases
- Accesserty UI KitComponent Libraries
HTML-first accessible web components with built-in keyboard behavior, state handling, and i18n. No runtime dependencies.
- AgnosticUIComponent Libraries
A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.
- AnywhereUIComponent Libraries
Collection of rich web components that includes framework bindings. Created with StencilJS.
- Apollo ElementsComponent Libraries
Custom elements for using Apollo GraphQL with various web components libraries.
- Apple Just Shipped Web Components to Production and You Probably Missed ItCase Studies
Archive
Guides
- Accessibility for Web ComponentsAccessibility
- Accessibility with ID Referencing and Shadow DOMAccessibility
- Build a Story Web Component with LitElementCodelabs
- Building Custom Elements with Web Components for the 2020 ElectionsCodelabs
- Creating Custom Form Controls with ElementInternalsCodelabs
- Custom Element Best PracticesBest Practices
Standards
- A complete guide on shadow DOM and event propagationShadow DOM
- Crafting Reusable HTML TemplatesHTML Templates
- CSS shadow partsCSS Shadow Parts
- CSS Shadow Parts are coming!CSS Shadow Parts
- CSS Shadow Parts Module Level 1CSS Shadow Parts
- Custom elementsCustom Elements
Articles
- A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontendsArchitecture
- Advanced Tooling for Web ComponentsInteroperability
- A Web Component StoryOpinions
- Custom Elements EverywhereInteroperability
- Custom elements, shadow DOM and implicit form submissionLimitations
- Custom Elements That Work AnywhereInteroperability
Libraries
- @adobe/react-webcomponentIntegrations
Automate the wrapping of a React component in a custom element.
- All the Ways to Make a Web ComponentBenchmarks
- atomicoFunctional
Small library for the creation of interfaces based on web components using functions and hooks.
- DNAClass Based
Progressive Web Components library.
- element-jsClass Based
Simple and lightweight base classes for web components with a beautiful API.
- ElementoFunctional
A lightweight library for building functional web components using signals and Lit.
Meta Frameworks
- AMP
Web component framework to easily create user-first experiences for the web.
- capybara-shadowdomTesting Solutions
Ruby gem that adds basic support for the Shadow DOM to Capybara.
- Create Open Web ComponentsStarter Kits
Web component project scaffolding.
- custom-element-boilerplateStarter Kits
Boilerplate for creating a custom element.
- Custom Elements LocatorTools
Chrome extension to find custom elements on a page.
- Custom Elements ManifestTools
Codegen for Web Components.
Showing a sample of 499 resources. View the full list on GitHub →