awesome-stenciljs

List of Awesome Web Components Built with StencilJS
https://github.com/mappmechanic/awesome-stenciljs

Last synced: 4 days ago
JSON representation

List of Awesome Components Made using StencilJS
- Component Libraries
  - Calcite App Components - A collection of calcite components for building single page applications of certain types.
  - Fitness Dashboard Components - Fitness Dashboard Components built using StencilJS
  - D3-Stencil - An _archived_ library of web components over popular D3 graph library
  - Stencil Components
  - Stencil Components
  - Stencil Styled Components - components to StencilJS
  - Aleph - Frame, AMI, StencilJS, and Ionic
  - wc-discord-message
  - Material Web Components - webcomponents)
  - Assister Chat
  - NENT - binding, and declarative actions) without any scripting or a build process (https://github.com/nent/nent)
- Individual Components
  - Rating Component - An amazing and flexible star rating component with lots of options. There is a blog post how to create such a component too. [https://www.logisticinfotech.com/blog/custom-rating-component/](https://www.logisticinfotech.com/blog/custom-rating-component/)
  - Trombone Component - An amazing Trombone Component that makes music when you resize the window. It's A showcase on how StencilJs and the Web Audio API can collaborate to create awesome things.
  - Smile To Unlock(Unique) - api-stu) to figure out how happy the person is.
  - Stencil Mobx
  - Stencil Reflector - mobx)
  - Stencil Payment
  - Web Share - share).
  - FWT Slider
  - Cryptocurrency Data
  - SplitMe
  - Simple Buttons
  - Stencil Fragment
  - o-demo-bar - rango.github.io/orango-demo-tools/)
  - ST-Voice2Text
  - nice-anim
  - always-avatar
  - web-complete - free, styleable autocomplete web component
  - word-spectrum
  - STX-ABTest
  - Animatable
  - Simple Buttons
  - Stencil Fragment
- Design Systems
  - Duet Design System - A complete Stencil Based Design System component library which can be used with any SPA Framework like Angular/React etc.
Ecosystem Highlights
- Component Libraries & Widgets
  - AnywhereUI
  - BlazeUI Atoms
  - Bulmil - inspired component wrappers as Web Components.
  - GOAT UI - rich UI kit including editors, tables, and advanced layout primitives.
  - Kickstand UI - agnostic design system ready for enterprise apps.
  - Material Web Components - inspired Stencil UI elements.
  - RevoGrid - performance data grid supporting millions of rows and theming.
  - Assister Chat - inspired primitives for conversational products.
  - NENT
  - Stencil Styled Components - components` ergonomics to Stencil projects.
- State Management
  - Stencil Hooks - style hooks API for Stencil components.
  - Stencil Redux - redux`.
  - Stencil Store
- Data & Visualization
- Utilities & Integrations
  - ST-Flippy
  - Bruit.io
  - Elsa Workflow Designer
  - Lazy Iframe - load iframes as they enter the viewport.
  - Spotify Login - enabled Spotify authentication component.
  - ST Fetch
  - ST Image - load images and background assets.
  - ST Muse
  - ST-Signature
  - fa-icon
  - Web Photo Filter - accelerated photo filtering UI.
  - Loading Spinner
  - Mastodon Share Button - in button.
  - UI Avatar - generate avatars with initials fallback.
  - Web Social Share
- Production Design Systems
  - Calcite Design System - ready suite powering ArcGIS experiences.
  - Ionic Framework Components - platform UI building blocks generated with Stencil.
  - Liquid Oxygen
  - Modus Web Components
  - Crayons
  - Duet Design System - featured, framework-agnostic components used across the Duet ecosystem.
  - Telements
Tooling & Automation
- Community Maintained
What are Web Components ?
- ![Watch the video - k7aHkQE)
Awesome Articles Related
- Visual Studio Code
  - Building a web-component library using StencilJS
  - How Stencil Fit Into Micro Frontend Ideas - An interesting read to know about usability of stenciljs
List of Awesome Websites Built using StencilJS
- Visual Studio Code
  - CodeCraft Smile To Unlock Video - to-unlock) used in the videos of his course which allows users to view video only if they Smile :).
Curated By (Contributors)
- [mAppmechanic](https://twitter.com/mappmechanic):
  - https://linkedin.com/in/rahatkh
  - https://linkedin.com/in/rahatkh
- [Utwo](https://github.com/utwo)
  - http://utwo.ro
  - http://utwo.ro
- [William M. Riley](https://github.com/splitinfinities)
  - https://twitter.com/splitinfinities
  - https://twitter.com/splitinfinities
Learning Resources
- Articles & Deep Dives
  - Stencil Todo with Redux
  - Stencil with AngularJS (v1)
  - Faster Web Apps Using Stencil - focused overview.
  - Stencil Components in React, Vue, and Angular
  - Building a Modal Component using StencilJS via TDD - driven approach to reusable components.
  - Build a Fast Offline First PWA with StencilJS
  - Building a Web-Component Library using StencilJS - ready design system insights.
  - How Stencil Fits into Micro Frontend Ideas - frontend considerations with Stencil.
  - Getting Started with StencilJS
  - How I Built Smile to Unlock - the-scenes look at a playful component.
- Talks & Videos
  - StencilJS Key Concepts by Max Lynch
Core Resources
- Stencil Documentation
- Stencil Roadmap & RFCs
- Stencil GitHub Repository
- Stencil Resources Showcase - driven libraries, tools, and starters featured by Ionic.
- Stencil Roadmap & RFCs
Production-Ready Apps & Sites
- State Management
Starter Kits & Templates
- Ionic Official
  - Stencil Component Starter
  - Stencil App Starter - purpose Stencil app boilerplate.
  - Ionic PWA Toolkit
  - Stencil DS Starter
- Community Maintained
  - Stencil Web Component Starter
Editor & IDE Extensions
- Visual Studio Code
  - Stencil Snippets
  - Stencil Tools
Community & Support
- Talks & Videos
  - Stencil Discussions
  - Stencil Discord - time chat channels hosted by Ionic for Stencil developers.
  - Stencil Twitter/X Hashtag
  - Stencil Discussions
  - Stencil Discord - time chat channels hosted by Ionic for Stencil developers.
  - Ionic Forum – Stencil Category
  - Stencil Twitter/X Hashtag
Miscellaneous Resources
- Talks & Videos
  - Stencil Cheatsheet

Programming Languages

TypeScript 52 JavaScript 7 CSS 2 HTML 2

awesome-stenciljs

List of Awesome Components Made using StencilJS

Component Libraries

Individual Components

Design Systems

Ecosystem Highlights

Component Libraries & Widgets

State Management

Data & Visualization

Utilities & Integrations

Production Design Systems

Tooling & Automation

Community Maintained

What are Web Components ?

Awesome Articles Related

Visual Studio Code

List of Awesome Websites Built using StencilJS

Visual Studio Code

Curated By (Contributors)

[mAppmechanic](https://twitter.com/mappmechanic):

[Utwo](https://github.com/utwo)

[William M. Riley](https://github.com/splitinfinities)

Learning Resources

Articles & Deep Dives

Talks & Videos

Core Resources

Production-Ready Apps & Sites

State Management

Starter Kits & Templates

Ionic Official

Community Maintained

Editor & IDE Extensions

Visual Studio Code

Community & Support

Talks & Videos

Miscellaneous Resources

Talks & Videos