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
- 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
- Astro Space UX Design SystemDesign Systems
Set of components to build rich space app experiences with established interaction patterns.
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
- A Guide to Custom Elements for React DevelopersCustom Elements
- All about HTML Custom ElementsCustom Elements
- Crafting Reusable HTML TemplatesHTML Templates
- CSS Shadow Parts are coming!CSS Shadow Parts
- Custom elementsCustom Elements
Articles
- A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontendsArchitecture
- Advanced Tooling for Web ComponentsInteroperability
- Beyond the polyfills: how Web Components affect us today?Limitations
- 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.
- BacklightTools
- 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.
Showing a sample of 478 resources. View the full list on GitHub →