Skip to content

stencil-community/awesome-stencil

Repository files navigation

Awesome Stencil Awesome Test

A curated list of awesome Stencil resources, libraries, tools and applications

Inspired by the awesome list. Feel free to improve this list by contributing!

Contents

Stencil Ecosystem

Documentation

Community

Design Systems

Awesome Design Systems build with StencilJS.

  • Siemens Industrial Experience (iX) - Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.
  • KoliBri - KoliBri stands for „Component library for the accessibility“ and was from the Informationstechnikzentrum Bund (ITZBund) open source released for reuse and further development.
  • Calcite Design System - Esri's Calcite Design System.
  • Swiss Post Design System - The Swiss Post Design System pattern library for a unified and accessible user experience across the web platform.
  • Duet Design System - Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences.
  • Scale - Scale is the digital design system for Telekom products and experiences.
  • Porsche Design System - Find all the fundamental UXI guidelines and pattern-based web components to build brand-driven, consistent and intuitive designs for digital Porsche products.
  • Atomium - Design System - Atomium is an internal design system for 'Juntos Somos Mais' using Web Components.
  • The Baloise Design System - consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications.
  • BEEQ, a web component library initiative - BEEQ Design System, is a web component library ruled by Endavan developers.
  • Infineon Design System - As part of the Infineon brand guidelines, the Infineon Digital Design System supports designers, developers and project managers to build user interfaces faster and better – with the ultimate goal of creating a coherent and optimal user journey across all internal and external Infineon digital touchpoints.
  • Klevu’s brand new SDK - Monorepository for Klevu headless.
  • SIX UI Library - Ready to use Web Components in alignment with the SIX Corporate Styleguide.
  • Swisscom SDX - the design system of the leading telecom provider in Switzerland, called "Swisscom Design eXperience".

UI Libraries

  • GOAT UI - contains most used web components built using Stencil. So you don't need to include any additional framework dependencies, You can simply import the required component js, and right away start using it.
  • DSO Toolkit - Design System of the Digitaal Stelsel Omgevingswet (DSO).
  • Bulmil - 💄 A agnostic UI components library based on Web Components, made with Bulma & Stencil.
  • Kelvin UI Components - Kelvin UI Components provides a set of reusable, high quality framework-agnostic UI components, this means you can use them with the current most popular Front-End Development Frameworks like React, Angular or if you prefer, the components are also available as W3C compliant WebComponents.
  • AnywhereUI - AnywhereUI is a collection of rich web components that includes framework bindings, created with StencilJS.
  • GO UI - A design system for everyone.

Components built with Stencil

  • Web Social Share - A Web Component to share URLs and text on social networks.
  • Image Cropper Component - An image cropper web component that allows users to crop a rectangle or a 4-point polygon.
  • RevoGrid - Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance.
  • Dough Library - This package provides some widgets you can use to create a smooshy UI.
  • qr-code - A no-framework, no-dependencies, customizable, animate-able, SVG-based HTML element.
  • stencil-quill - Native web components for the Quill Rich Text Editor built with Stencil.
  • sketch-polls - Live poll web component.
  • animate-presence - Effortless element entrance/exit animations.

Plugins

  • stencil-store - Store is a lightweight shared state library by the StencilJS core team. Implements a simple key/value map that efficiently re-renders components when necessary.
  • stencil-sass - Sass plugin for Stencil.
  • stencil-eslint - ESLint rules specific to Stencil JS projects.
  • stencil-postcss - Autoprefixer plugin for Stencil.
  • stencil-helmet - Declaratively update the <head> from a Stencil app.
  • stencil-router - A simple router for Stencil apps and sites.
  • stencil-tailwind-plugin - Plugin for using Tailwindcss with StencilJS

Starter Templates

Back to top