Finally Good News - Stencil v3 has been released

Announcement Blog Post - https://ionic.io/blog/announcing-stencil-3

Carefully curated resources for building modern Web Component experiences with Stencil.

Keeping 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.

• What is StencilJS?
• Why Web Components?
• Core Resources
• Ecosystem Highlights
  • Production Design Systems
  • Component Libraries & Widgets
  • Data & Visualization
  • Utilities & Integrations
  • State Management
• Production-Ready Apps & Sites
• Starter Kits & Templates
• Tooling & Automation
• Editor & IDE Extensions
• Learning Resources
  • Articles & Deep Dives
  • Talks & Videos
• Community & Support
• Miscellaneous Resources
• Curated By (Contributors)

StencilJS 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.

Web Components is a combination of multiple HTML & JS Specs like Custom Elements & 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.

• Stencil Documentation – Official docs, release notes, and examples straight from the Ionic team.
• Stencil Roadmap & RFCs – Track active proposals, bug bashes, and upcoming platform work.
• Stencil GitHub Repository – Source for the compiler, runtime, and contribution guide.
• Stencil Resources Showcase – Gallery of community-driven libraries, tools, and starters featured by Ionic.

• Calcite Design System – Esri’s production-ready suite powering ArcGIS experiences.
• Crayons – Freshworks’ design system for customer support and CRM surfaces.
• Duet Design System – Full-featured, framework-agnostic components used across the Duet ecosystem.
• Ionic Framework Components – Cross-platform UI building blocks generated with Stencil.
• Liquid Oxygen – Accessible, interoperable components based on the Liquid Design System.
• Modus Web Components – Trimble’s enterprise component set with accessibility baked in.
• Telements – Deutsche Telekom’s customizable UI components written with Stencil.

• AnywhereUI – Rich component set with official bindings for Angular, React, and Vue.
• Assister Chat – Chat-inspired primitives for conversational products.
• BlazeUI Atoms – Lightweight CSS framework accompanied by composable Stencil atoms.
• Bulmil – Bulma-inspired component wrappers as Web Components.
• GOAT UI – Feature-rich UI kit including editors, tables, and advanced layout primitives.
• Kickstand UI – Framework-agnostic design system ready for enterprise apps.
• Material Web Components – Material Design-inspired Stencil UI elements.
• NENT – Declarative building blocks for routing, markdown, and data binding with minimal setup.
• RevoGrid – High-performance data grid supporting millions of rows and theming.
• Stencil Styled Components – Bring styled-components ergonomics to Stencil projects.
• [AirComponents](https://github.com/adaleks/anywhere-ui: A modern component library built with StencilJS, focusing on semantic, standardized, and branded design for reusable UI components.

• Animatable – Declaratively animate any element using the Web Animations API.
• Fast Morph – Light DOM morphing animations for delightful transitions.
• Image Comparison Slider – Before/after comparison slider with touch support.
• IonPhaser – Integrate Phaser games with modern frameworks via Web Components.
• Remote Table – Data table with remote JSON support, search, and pagination.
• Video Player – Interactive video player component.
• Web Audio Components – Compose Web Audio graphs declaratively.
• Katex Expression – Render KaTeX math expressions.

• Bruit.io – Collect user feedback with annotated screenshots.
• Elsa Workflow Designer – Visual workflow editor with export support.
• Lazy Iframe – Lazy-load iframes as they enter the viewport.
• Loading Spinner – Configurable loader components from a single source.
• Mastodon Share Button – Promote Mastodon sharing with a drop-in button.
• Spotify Login – OAuth-enabled Spotify authentication component.
• ST Fetch – Fetch API wrapper for declarative data loading.
• ST Image – Lazy-load images and background assets.
• ST Muse – Connect to Muse headsets with Stencil.
• ST-Flippy – Add flip animations to arbitrary markup.
• ST-Signature – Capture and export handwritten signatures.
• UI Avatar – Auto-generate avatars with initials fallback.
• Web Photo Filter – GPU-accelerated photo filtering UI.
• Web Social Share – Share URLs across multiple social networks.
• fa-icon – Font Awesome 5 icons packaged as Stencil components.

• Stencil Hooks – React-style hooks API for Stencil components.
• Stencil Redux – Redux connector inspired by react-redux.
• Stencil Store – Lightweight shared state from the Stencil core team.

• DeckDeckGo – Online presentation platform with companion mobile remote.
• Venue Genie – Venue marketplace powered by Stencil and Redux.
• Stencil with AdMob (via Capacitor) – Documentation site showcasing Stencil + Capacitor integration.

• Stencil Component Starter – Minimal starting point for a reusable component library.
• Stencil App Starter – All-purpose Stencil app boilerplate.
• Ionic PWA Toolkit – Build production PWAs with Ionic + Stencil.
• Stencil DS Starter – Opinionated setup for design systems with automated output targets.

• Stencil Web Component Starter – Opinionated starter including automated documentation.

• Create Stencil – CLI script to bootstrap fresh Stencil projects quickly.
• Kompendium – Generate documentation sites for your components.
• Stencil Apollo – Utilities for wiring Apollo GraphQL clients into Web Components.
• Stencil DS Output Targets – Official output targets for React, Angular, and Vue bindings.
• stencil-postcss – PostCSS integration for bundling modern CSS tooling into builds.
• stencil-react – Generate React bindings for your Stencil libraries.

• Stencil Snippets – Productivity snippets for components, props, events, and more.
• Stencil Tools – Project and component generators, snippets, and utilities.

• Build a Fast Offline First PWA with StencilJS – Intro to PWAs and Stencil fundamentals.
• Building a Modal Component using StencilJS via TDD – Test-driven approach to reusable components.
• Building a Web-Component Library using StencilJS – Enterprise-ready design system insights.
• How Stencil Fits into Micro Frontend Ideas – Micro-frontend considerations with Stencil.
• Stencil with AngularJS (v1) – Compatibility guidance for legacy AngularJS projects.
• Faster Web Apps Using Stencil – Performance-focused overview.
• How I Built Smile to Unlock – Behind-the-scenes look at a playful component.
• Stencil Todo with Redux – Practical example of state management patterns.
• Getting Started with StencilJS – Friendly introduction for newcomers.
• Stencil Components in React, Vue, and Angular – Framework integration tutorial.

• StencilJS Key Concepts by Max Lynch – Conference talk covering compiler internals and best practices.

• Stencil Discussions – Ask questions and share tips directly with the core team and community maintainers.
• Stencil Discord – Real-time chat channels hosted by Ionic for Stencil developers.
• Ionic Forum – Stencil Category – Threaded support with searchable history and solutions.
• Stencil Twitter/X Hashtag – Follow announcements and community showcases.

• Stencil Cheatsheet – Handy reference of core concepts and patterns.

LinkedIn Bio: https://linkedin.com/in/rahatkh

Website: http://utwo.ro

Twitter: https://twitter.com/splitinfinities

Github: https://github.com/Nudelsieb