Using Stencil to Build a Design System

There’s a lot that goes into creating amazing UI components. Performance, accessibility, cross-platform capabilities, and user experience (not only of the UI component itself but how it fits into the entire design system) all must be considered.

These aspects take real effort to do well.

Enter Stencil, a robust and highly extensible tool for building design systems. With its intentionally minimalistic tooling and API footprint, it’s simple to incorporate into your existing development workflows. It brings substantial performance out of the box by leveraging a tiny runtime. Most importantly, all UI components built with Stencil are based 100% on open web standards.

The importance of open web standards

By using the web components standard, supported in all modern browsers, Stencil-built UI components offer many distinct advantages for use in a design system, namely:

• They work on any platform or device
• They work with any front-end framework, so they can easily be used across teams and projects using different tech stacks
• They facilitate the creation of one company-wide code implementation instead of one per framework or platform

Learn more about why web components are ideal for design systems in this blog post.

How to Get Started

Stencil’s out-the-box features will help you build your own library of universal UI components that will work across platforms, devices, and front-end frameworks. Review the documentation on this site to get started.

Need help building and scaling your company's design system? With Ionic as your development partner, you can reduce design debt, connect disparate tech teams, and get assistance enforcing brand consistency at scale. Learn more about Stencil Enterprise.