Bring your company’s design system to life.

Reduce design debt, connect disparate tech teams, and enforce brand consistency at scale with code-based, world-class design systems that work everywhere.

Learn more

Production-ready Design Systems at Scale.

Build shared components across teams using a diverse set of frontend frameworks and technologies, all while enforcing brand guidelines and exceeding accessibility standards.

Stencil OSS

Always free & open source

Stencil DS

Custom pricing

Web Component compiler
Web Component compiler
Lazy-loading for Components
Lazy-loading for Components
Intelligent polyfill loading
Intelligent polyfill loading
Community support
Premium Support SLA
Generate bindings for Angular, React, and Vue
Automated Documentation generation
Visual Regression testing tools
Accessibility verification tools
Expert advisory on your Design System project
Training opportunities
Install StencilGet in touch
Design Systems guide cover

Interested in building Design Systems with Web Components?

Our new guide breaks down everything you need to know.

Get the guide

FAQ for Stencil DS

What parts of Stencil are free? What parts are commercially licensed?

Yes, the official Stencil project is 100% free and open source (MIT licensed), and always will be. We offer Stencil DS for teams undertaking large Design System initiatives which offers additional features and tools that are not free. This keeps the lights on and lets us keep making the Stencil you know and love better and better, all while helping teams be successful with their Design System initiatives.

Why do Angular, React, and Vue need bindings?

Stencil builds standard Web Components that run in all modern browsers, with intelligent loading of any necessary polyfills for clients with missing APIs.

However, certain frameworks, such as React, don't play as well with Web Components out of the box. Additionally, developers often prefer a framework's conventions for naming and usage that deviates from typical Web Component usage.

To bring the best of both worlds, Stencil DS automatically generates up-to-date bindings for all major frameworks and smooths out any rough edges in their Web Component support. This also makes using Stencil-built components feel native to each framework.

What is Automated Documentation Generation?

One of the greatest challenges for Design Systems is adoption. Developers will take the path of least resistance to get their work done, and that means the best documentation wins.

To ensure your Design System achieves mass adoption, Stencil DS generates top-quality documentation automatically from your components, with rich metadata about properties and events gathered directly from your component code.

Stencil DS generates live examples, code snippets, and an index of all your components in a beautiful but easily customizable fashion, to make it incredibly fast and easy for developers to find and use the components they need.

The team behind Stencil DS's documentation generation built Ionic Framework's documentation, regarded by many as some of the best developer documentation for an open source project. We can bring that level of developer regard directly to your Design System's official documentation.

How do you verify components meet Accessibility standards?

Building a Design System with Web Component APIs that exceeds accessibility standards is not straightforward. Stencil DS comes with a number of features and tools that help verify and enforce accessibility support for your components in a continuous way that can be easily integrated into your Continuous Integration workflow.

This goes above and beyond existing Accessibility testing tools and ensures your Design System initiative meets and exceeds all legal requirements for Accessibility.

How do I ensure components don't have visual UI regressions or issues in specific browsers?

One of the biggest challenges to building any sophisticated component kit or Design System is ensuring components don't have visual regressions due to changes in styles or issues with specific browsers.

Unfortunately, traditional unit testing or snapshot testing is not sufficient to test visual style and layout changes. The Ionic team built out a set of powerful visual regression testing tools to ensure consistency between releases.

Stencil DS brings these powerful visual regression tools to teams building Design Systems, and helps them integrate with your existing Continuous Integration workflow to provide UI verification on every single commit.

What do I get with Premium Support?

While Stencil has an active community and is being actively maintained, there are cases where certain bugs or features are not a priority due to misalignment with our open source roadmap or time constraints.

For teams deploying major Design System initiatives, relying on open source and community support is not sufficient. You'll need assurance that key issues or features are identified and communicated quickly, with potential fixes or workarounds made available in a timely fashion.

With Stencil DS, Premium Support is provided and teams will have a dedicated account manager to communicate with if anything goes wrong.

My team needs help making our initiative successful. Do you offer Advisory Services?

Yes! The Stencil team is the same team that build and deployed one of the most successful open source Design Systems ever: Ionic Framework. Today, Ionic is used by millions of developers for over five million applications.

Not only that, but the team behind Stencil is a leader in modern Web APIs and Progressive Web Apps, and has unique expertise that is difficult to find anywhere else.

We work with major enterprise companies and high growth startups undertaking major Design System initiatives that can't afford to fail, and we're ready to help your team, too!

Want to learn more about Stencil DS?

Our team will reach out to see how we can help make your Design System initiative successful.