{"id":42616,"url":"https://github.com/mappmechanic/awesome-stenciljs","name":"awesome-stenciljs","description":"List of Awesome Web Components Built with StencilJS ","projects_count":81,"last_synced_at":"2026-09-29T03:00:18.003Z","repository":{"id":26022122,"uuid":"104872684","full_name":"mappmechanic/awesome-stenciljs","owner":"mappmechanic","description":"List of Awesome Web Components Built with StencilJS ","archived":false,"fork":false,"pushed_at":"2026-01-26T05:03:29.000Z","size":103,"stargazers_count":713,"open_issues_count":2,"forks_count":67,"subscribers_count":29,"default_branch":"master","last_synced_at":"2026-09-09T05:07:45.140Z","etag":null,"topics":["ionic-framework","stencil","stenciljs","stenciljs-components","typescript","web-components","webcomponents","webcomponents-framework"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mappmechanic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-09-26T10:48:07.000Z","updated_at":"2026-08-19T01:18:55.000Z","dependencies_parsed_at":"2025-10-25T22:02:06.375Z","dependency_job_id":"62f8d3c6-192a-4889-afdc-a96d3f6e4d04","html_url":"https://github.com/mappmechanic/awesome-stenciljs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mappmechanic/awesome-stenciljs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mappmechanic%2Fawesome-stenciljs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mappmechanic%2Fawesome-stenciljs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mappmechanic%2Fawesome-stenciljs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mappmechanic%2Fawesome-stenciljs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mappmechanic","download_url":"https://codeload.github.com/mappmechanic/awesome-stenciljs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mappmechanic%2Fawesome-stenciljs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":341301770,"owners_count":37826554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-09-29T02:00:06.972Z","response_time":187,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-13T21:18:25.190Z","updated_at":"2026-09-29T03:00:18.008Z","primary_language":"JavaScript","list_of_lists":false,"displayable":true,"categories":["Ecosystem Highlights","What are Web Components ?","List of Awesome Components Made using StencilJS","Tooling \u0026 Automation","Miscellaneous Resources","Learning Resources","Awesome Articles Related","List of Awesome Websites Built using StencilJS","Production-Ready Apps \u0026 Sites","Curated By (Contributors)","Starter Kits \u0026 Templates","Editor \u0026 IDE Extensions","Core Resources","Community \u0026 Support"],"sub_categories":["Component Libraries \u0026 Widgets","Design Systems","Component Libraries","Individual Components","Community Maintained","Talks \u0026 Videos","Articles \u0026 Deep Dives","Visual Studio Code","State Management","[mAppmechanic](https://twitter.com/mappmechanic):","[Utwo](https://github.com/utwo)","[William M. Riley](https://github.com/splitinfinities)","Production Design Systems","Utilities \u0026 Integrations","Ionic Official","Data \u0026 Visualization"],"readme":"Finally Good News - Stencil v3 has been released\n\n\u003cimg src=\"https://ionic.io/blog/wp-content/uploads/2023/01/stencil3-feature-image.png\" width=\"350\" /\u003e\n\nAnnouncement Blog Post - https://ionic.io/blog/announcing-stencil-3\n\n# Awesome StencilJS\n\n\u003e Carefully curated resources for building modern Web Component experiences with [Stencil](https://stenciljs.com/).\n\nKeeping track of the Stencil community can be tricky as new design systems, tooling, and learning materials land each year. This guide surfaces the resources that continue to see active maintenance or adoption so you can ramp up quickly without sifting through outdated links.\n\n## Contents\n- [What is StencilJS?](#what-is-stenciljs)\n- [Why Web Components?](#what-are-web-components)\n- [Core Resources](#core-resources)\n- [Ecosystem Highlights](#ecosystem-highlights)\n  - [Production Design Systems](#production-design-systems)\n  - [Component Libraries \u0026 Widgets](#component-libraries--widgets)\n  - [Data \u0026 Visualization](#data--visualization)\n  - [Utilities \u0026 Integrations](#utilities--integrations)\n  - [State Management](#state-management)\n- [Production-Ready Apps \u0026 Sites](#production-ready-apps--sites)\n- [Starter Kits \u0026 Templates](#starter-kits--templates)\n- [Tooling \u0026 Automation](#tooling--automation)\n- [Editor \u0026 IDE Extensions](#editor--ide-extensions)\n- [Learning Resources](#learning-resources)\n  - [Articles \u0026 Deep Dives](#articles--deep-dives)\n  - [Talks \u0026 Videos](#talks--videos)\n- [Community \u0026 Support](#community--support)\n- [Miscellaneous Resources](#miscellaneous-resources)\n- [Curated By (Contributors)](#curated-by-contributors)\n\n\n## What is StencilJS?\n\nStencilJS is the new compiler to build standards compliant Web Components using the current age principles like Typescript, JSX, Virtual DOM, asynchronous rendering pipleline and lazy-loading.\n\n## What are Web Components?\n\nWeb Components is a combination of multiple HTML \u0026 JS Specs like Custom Elements \u0026 Shadow DOM which enable us to create highly standardised reusable components which can work similarly accross any framework like React, Angular, Ember, Vue or Vanilla JS.\n\n## Core Resources\n\n- [Stencil Documentation](https://stenciljs.com/docs/introduction) – Official docs, release notes, and examples straight from the Ionic team.\n- [Stencil Roadmap \u0026 RFCs](https://github.com/ionic-team/stencil/issues) – Track active proposals, bug bashes, and upcoming platform work.\n- [Stencil GitHub Repository](https://github.com/ionic-team/stencil) – Source for the compiler, runtime, and contribution guide.\n- [Stencil Resources Showcase](https://stenciljs.com/resources) – Gallery of community-driven libraries, tools, and starters featured by Ionic.\n\n## Ecosystem Highlights\n\n### Production Design Systems\n- [Crayons](https://crayons.freshworks.com/introduction) – Freshworks’ design system for customer support and CRM surfaces.\n- [Duet Design System](https://www.duetds.com/using-components/) – Full-featured, framework-agnostic components used across the Duet ecosystem.\n- [Ionic Framework Components](https://ionicframework.com/docs/components) – Cross-platform UI building blocks generated with Stencil.\n- [Liquid Oxygen](https://emdgroup-liquid.github.io/liquid/) – Accessible, interoperable components based on the Liquid Design System.\n- [Modus Web Components](https://modus-web-components.trimble.com/) – Trimble’s enterprise component set with accessibility baked in.\n- [Telements](https://github.com/telekom/telements) – Deutsche Telekom’s customizable UI components written with Stencil.\n\n### Component Libraries \u0026 Widgets\n- [AnywhereUI](https://github.com/adaleks/anywhere-ui) – Rich component set with official bindings for Angular, React, and Vue.\n- [Assister Chat](https://github.com/assister-ai/assister/tree/master/packages/chat) – Chat-inspired primitives for conversational products.\n- [BlazeUI Atoms](https://www.blazeui.com/) – Lightweight CSS framework accompanied by composable Stencil atoms.\n- [Bulmil](https://github.com/Gomah/bulmil) – Bulma-inspired component wrappers as Web Components.\n- [GOAT UI](https://goatui.com/) – Feature-rich UI kit including editors, tables, and advanced layout primitives.\n- [Kickstand UI](https://kickstand-ui.com/) – Framework-agnostic design system ready for enterprise apps.\n- [Material Web Components](https://github.com/san2beerelli/material-webcomponents) – Material Design-inspired Stencil UI elements.\n- [NENT](https://nent.dev) – Declarative building blocks for routing, markdown, and data binding with minimal setup.\n- [RevoGrid](https://github.com/revolist/revogrid) – High-performance data grid supporting millions of rows and theming.\n- [Stencil Styled Components](https://github.com/michaelauderer/stencil-styled-components) – Bring `styled-components` ergonomics to Stencil projects.\n- [AirComponents]([https://github.com/adaleks/anywhere-ui](https://github.com/aircomponents/aircomponents): A modern component library built with StencilJS, focusing on semantic, standardized, and branded design for reusable UI components.\n\n### Data \u0026 Visualization\n- [Animatable](https://proyecto26.github.io/animatable-component) – Declaratively animate any element using the Web Animations API.\n- [Fast Morph](https://github.com/matteobortolazzo/fast-morph) – Light DOM morphing animations for delightful transitions.\n- [Image Comparison Slider](https://github.com/sneas/img-comparison-slider) – Before/after comparison slider with touch support.\n- [IonPhaser](https://github.com/proyecto26/ion-phaser) – Integrate Phaser games with modern frameworks via Web Components.\n- [Remote Table](https://github.com/aqidd/remote-table) – Data table with remote JSON support, search, and pagination.\n- [Video Player](https://github.com/CookieCookson/stencil-video-player) – Interactive video player component.\n- [Web Audio Components](https://github.com/splitinfinities/web-audio-wc) – Compose Web Audio graphs declaratively.\n- [Katex Expression](https://github.com/navsgh/katex-expression) – Render KaTeX math expressions.\n\n### Utilities \u0026 Integrations\n- [Bruit.io](https://github.com/Moventes/bruit.io) – Collect user feedback with annotated screenshots.\n- [Elsa Workflow Designer](https://github.com/elsa-workflows/elsa-designer) – Visual workflow editor with export support.\n- [Lazy Iframe](https://github.com/jgw96/lazy-iframe) – Lazy-load iframes as they enter the viewport.\n- [Loading Spinner](https://github.com/seanwuapps/stencil-loading-spinner) – Configurable loader components from a single source.\n- [Mastodon Share Button](https://github.com/codesyntax/mastodon-share-button) – Promote Mastodon sharing with a drop-in button.\n- [Spotify Login](https://github.com/andrelmlins/spotify-login) – OAuth-enabled Spotify authentication component.\n- [ST Fetch](https://github.com/Fdom92/stencil-fetch) – Fetch API wrapper for declarative data loading.\n- [ST Image](https://github.com/jgw96/st-img) – Lazy-load images and background assets.\n- [ST Muse](https://github.com/gilf/st-muse) – Connect to Muse headsets with Stencil.\n- [ST-Flippy](https://github.com/zwacky/st-flippy) – Add flip animations to arbitrary markup.\n- [ST-Signature](https://github.com/gilf/st-signature) – Capture and export handwritten signatures.\n- [UI Avatar](https://github.com/soapdog/webcomponent-ui-avatar) – Auto-generate avatars with initials fallback.\n- [Web Photo Filter](https://github.com/fluster/web-photo-filter) – GPU-accelerated photo filtering UI.\n- [Web Social Share](https://github.com/peterpeterparker/web-social-share) – Share URLs across multiple social networks.\n- [fa-icon](https://github.com/adamlacombe/fa-icon) – Font Awesome 5 icons packaged as Stencil components.\n\n### State Management\n- [Stencil Hooks](https://github.com/saasquatch/stencil-hooks) – React-style hooks API for Stencil components.\n- [Stencil Redux](https://github.com/ionic-team/stencil-redux) – Redux connector inspired by `react-redux`.\n- [Stencil Store](https://github.com/ionic-team/stencil-store) – Lightweight shared state from the Stencil core team.\n\n## Production-Ready Apps \u0026 Sites\n- [DeckDeckGo](https://deckdeckgo.com) – Online presentation platform with companion mobile remote.\n- [Venue Genie](https://venuegenie.com) – Venue marketplace powered by Stencil and Redux.\n- [Stencil with AdMob (via Capacitor)](https://admob-capacitor.com/capacitor-first-steps) – Documentation site showcasing Stencil + Capacitor integration.\n\n## Starter Kits \u0026 Templates\n\n### Ionic Official\n- [Stencil Component Starter](https://github.com/ionic-team/stencil-component-starter) – Minimal starting point for a reusable component library.\n- [Stencil App Starter](https://github.com/ionic-team/stencil-app-starter) – All-purpose Stencil app boilerplate.\n- [Ionic PWA Toolkit](https://github.com/ionic-team/ionic-pwa-toolkit) – Build production PWAs with Ionic + Stencil.\n- [Stencil DS Starter](https://github.com/ionic-team/stencil-ds-starter) – Opinionated setup for design systems with automated output targets.\n\n### Community Maintained\n- [Stencil Web Component Starter](https://github.com/khaledosman/stencil-web-components-demo) – Opinionated starter including automated documentation.\n\n## Tooling \u0026 Automation\n- [Create Stencil](https://github.com/ionic-team/create-stencil) – CLI script to bootstrap fresh Stencil projects quickly.\n- [Kompendium](https://docs.kompendium.dev/) – Generate documentation sites for your components.\n- [Stencil Apollo](https://github.com/ardatan/stencil-apollo) – Utilities for wiring Apollo GraphQL clients into Web Components.\n- [Stencil DS Output Targets](https://github.com/ionic-team/stencil-ds-output-targets) – Official output targets for React, Angular, and Vue bindings.\n- [stencil-postcss](https://github.com/ionic-team/stencil-postcss) – PostCSS integration for bundling modern CSS tooling into builds.\n- [stencil-react](https://github.com/petermikitsh/stencil-react) – Generate React bindings for your Stencil libraries.\n\n## Editor \u0026 IDE Extensions\n\n### Visual Studio Code\n- [Stencil Snippets](https://github.com/Fdom92/stencil-snippets) – Productivity snippets for components, props, events, and more.\n- [Stencil Tools](https://github.com/natemoo-re/vscode-stencil-tools) – Project and component generators, snippets, and utilities.\n\n## Learning Resources\n\n### Articles \u0026 Deep Dives\n- [Build a Fast Offline First PWA with StencilJS](https://www.manifold.co/blog/build-a-fast-offline-first-pwa-with-stenciljs-596727624e5c) – Intro to PWAs and Stencil fundamentals.\n- [Building a Modal Component using StencilJS via TDD](https://medium.com/stencil-tricks/how-to-build-modals-with-stenciljs-f3e18caf86cf) – Test-driven approach to reusable components.\n- [Building a Web-Component Library using StencilJS](https://medium.com/spring-media-techblog/building-a-web-component-library-with-stenciljs-77d730ccf568) – Enterprise-ready design system insights.\n- [How Stencil Fits into Micro Frontend Ideas](https://medium.com/@gilfink/avoiding-the-framework-catholic-wedding-using-stencil-compiler-3c2aa55bcaca) – Micro-frontend considerations with Stencil.\n- [Stencil with AngularJS (v1)](https://medium.com/@vivainio/using-stenciljs-components-in-angular-1-application-2f09287c151) – Compatibility guidance for legacy AngularJS projects.\n- [Faster Web Apps Using Stencil](http://warebo.com/faster-web-apps-using-stencil-mnsjL-WYzKQ) – Performance-focused overview.\n- [How I Built Smile to Unlock](https://codecraft.tv/blog/2017/10/10/smile-to-unlock-webcomponent-stenciljs/) – Behind-the-scenes look at a playful component.\n- [Stencil Todo with Redux](https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/) – Practical example of state management patterns.\n- [Getting Started with StencilJS](https://codingthesmartway.com/getting-started-with-stencil-a-web-component-generator/) – Friendly introduction for newcomers.\n- [Stencil Components in React, Vue, and Angular](https://medium.com/@ales.genova/stenciljs-in-react-vue-angular-82fded0c738f) – Framework integration tutorial.\n\n### Talks \u0026 Videos\n- [StencilJS Key Concepts by Max Lynch](https://youtu.be/UfD-k7aHkQE) – Conference talk covering compiler internals and best practices.\n\n## Community \u0026 Support\n- [Stencil Discussions](https://github.com/ionic-team/stencil/discussions) – Ask questions and share tips directly with the core team and community maintainers.\n- [Stencil Discord](https://ionic.link/stencil-discord) – Real-time chat channels hosted by Ionic for Stencil developers.\n- [Ionic Forum – Stencil Category](https://forum.ionicframework.com/c/stencil/71) – Threaded support with searchable history and solutions.\n- [Stencil Twitter/X Hashtag](https://twitter.com/hashtag/stenciljs) – Follow announcements and community showcases.\n\n## Miscellaneous Resources\n- [Stencil Cheatsheet](https://devhints.io/stencil) – Handy reference of core concepts and patterns.\n\n## Curated By (Contributors)\n### [mAppmechanic](https://twitter.com/mappmechanic):\nLinkedIn Bio: [https://linkedin.com/in/rahatkh](https://linkedin.com/in/rahatkh)\n\n### [Utwo](https://github.com/utwo)\nWebsite: [http://utwo.ro](http://utwo.ro)\n\n### [William M. Riley](https://github.com/splitinfinities)\nTwitter: [https://twitter.com/splitinfinities](https://twitter.com/splitinfinities)\n\n### [Falk (Nudelsieb)](https://github.com/Nudelsieb)\nGithub: https://github.com/Nudelsieb\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/mappmechanic%2Fawesome-stenciljs/projects"}