awesome-stenciljs

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

Last synced: 3 days ago
JSON representation

List of Awesome Components Made using StencilJS
- Component Libraries
  - RevoGrid - Powerful data grid library built with StencilJS for reactive excel like data representation. Millons of cells support and design themes included.
  - 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
  - stencil-react
  - Bulmil
  - Aleph - Frame, AMI, StencilJS, and Ionic
  - wc-discord-message
  - Liquid Oxygen
  - AnywhereUI
  - Material Web Components - webcomponents)
  - BlazeUI Atoms
  - Assister Chat
  - NENT - binding, and declarative actions) without any scripting or a build process (https://github.com/nent/nent)
  - GOAT UI
  - Kickstand UI
  - Stencil Components
  - Stencil Styled Components - components to StencilJS
  - Assister Chat
- State Management
  - Stencil Hooks - A React-hooks API for stencil components
  - Stencil Store - Store is a lightweight shared state library by the StencilJS core team.
  - Stencil Redux - A simple redux connector for Stencil-built web components inspired by react-redux.
- Individual Components
  - Web Social Share - An amazing component to initiate sharing of a Web Page/URL at multiple Social Media Networks
  - Elsa Workflow Designer - An amazing component to design a Workflow visually and then export it.
  - 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/)
  - Image Comparison Slider - Slider component to compare images before and after
  - 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.
  - Fast Morph
  - Lazy Iframe
  - Loading Spinner
  - ST-Flippy
  - ST-Signature
  - Web Audio - audio>`, `<web-audio-source>`, `<web-audio-effect>`, `<web-audio-visualizer>`, `<web-audio-sequencer>`, and `<web-audio-debugger>`.
  - Smile To Unlock(Unique) - api-stu) to figure out how happy the person is.
  - Bruit.io - started).
  - Stencil-Apollo - A set of Web Components based on [Apollo Client](https://github.com/apollographql/apollo-client)
  - Stencil Mobx
  - Stencil Reflector - mobx)
  - Stencil Payment
  - Web Share - share).
  - ST Image
  - ST Muse - js).
  - FWT Slider
  - ST Fetch
  - Video Player
  - Cryptocurrency Data
  - SplitMe
  - Simple Buttons
  - Stencil Fragment
  - o-demo-bar - rango.github.io/orango-demo-tools/)
  - ST-Voice2Text
  - UI Avatar
  - IonPhaser
  - nice-anim
  - always-avatar
  - Katex Expression
  - web-complete - free, styleable autocomplete web component
  - word-spectrum
  - Mastodon Share Button
  - Remote Table
  - Spotify Login
  - fa-icon
  - STX-ABTest
  - Animatable
  - Web Photo Filter
  - Cryptocurrency Data
  - Simple Buttons
  - Stencil Fragment
  - o-demo-bar - rango.github.io/orango-demo-tools/)
- 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.
  - Telements - The Telements library offers a set of customizable UI components written with Stencil.js & TypeScript.
Boilerplates and templates
- Ionic official
- Community
  - Stencil Web Component Starter - A nice web components started which also tells how documentation is auto generated too.
Tools (CLIs, scripts, etc.)
- Ionic official
  - Create Stencil - and-templates)
- Community
  - Kompendium
Awesome IDE Specific Stencil Plugins/Snippets
- Visual Studio Code
  - Stencil Snippets - Stencil Snippets like st-component(generate component), st-prop(add new prop), st-event (add new @Event) etc.
  - Stencil Tools - Makes working with Stencil projects a breeze. Features new project, component, and test generators, snippets with automatic imports, and other helpful utilities.
What are Web Components ?
- ![Watch the video - k7aHkQE)
Miscellaneous
- Visual Studio Code
  - Stencil cheatsheet
Awesome Articles Related
- Visual Studio Code
  - Build a Fast Offline first PWA with StencilJS
  - Building a Modal Component using StencilJS via TDD
  - Building a web-component library using StencilJS
  - How Stencil Fit Into Micro Frontend Ideas - An interesting read to know about usability of stenciljs
  - Stencil with AngularJS(v1) - Using Stencil Component with AngularJS v1.
  - Faster Web Apps Using Stencil - An article with a small video explaining how you can develop faster web apps using StencilJS.
  - How I built Smile to Unlock - How Asim built SmileToUnlock using StencilJS components.
  - Stencil Todo with Redux - Awesome article explaining how to use stencil todo with redux.
  - Getting Started with StencilJS - Great resource to get started with StencilJS development.
  - Stencil components in React, Vue, and Angular - Step by step guide to use stencil components in the most popular JavaScript frameworks.
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 :).
  - Venue Genie
  - Stencil with Admob (via Capacitor)
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
- [William M. Riley](https://github.com/splitinfinities)
  - https://twitter.com/splitinfinities
  - https://twitter.com/splitinfinities

Programming Languages

TypeScript 53 JavaScript 7 CSS 2 HTML 2

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-stenciljs

Component Libraries

State Management

Individual Components

Design Systems

Boilerplates and templates

Ionic official

Community

Tools (CLIs, scripts, etc.)

Ionic official

Community

Awesome IDE Specific Stencil Plugins/Snippets

Visual Studio Code

What are Web Components ?

Miscellaneous

Visual Studio Code

Visual Studio Code

Visual Studio Code

Curated By (Contributors)

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

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

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

awesome-stenciljs

List of Awesome Components Made using StencilJS

Component Libraries

State Management

Individual Components

Design Systems

Boilerplates and templates

Ionic official

Community

Tools (CLIs, scripts, etc.)

Ionic official

Community

Awesome IDE Specific Stencil Plugins/Snippets

Visual Studio Code

What are Web Components ?

Miscellaneous

Visual Studio Code

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)