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.
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.
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.
Additionally, the Ionic team (backers of Stencil) offers comprehensive assistance for enterprises who are embarking on their design systems journey. If this is your first time building a design system, or you’re new to Stencil, we encourage you to get in touch with one of our Solutions Engineers for a free consultation on how to meet your goals and get the most out of the platform.
