On the blog: Build your next Design System with Web Components

Stencil DS

Production-ready Design Systems at Scale

Is your company struggling to build shared components across teams using a diverse set of frontend frameworks and technologies, all while enforcing brand guidelines and exceeding accessibility standards?

The Stencil team is helping many large teams and enterprises build Design Systems at scale. Let us help make your Design System initiative successful.

Stencil OSS

Free and Open Source Forever

  • The Stencil you know and love
  • Web Component compiler
  • Lazy-loading for Components
  • Intelligent polyfill loading
  • High-performance PWAs
  • Community support

FAQ for Stencil DS

  • Is Stencil free?

    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.

  • What are Angular, React, and Vue libraries for Stencil?

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

    However, developers often prefer a framework's conventions for naming and usage that deviates from typical Web Component usage. In addition, building a library that can be consumed natively in each framework is tricky and is a moving target.

    To help with this, Stencil DS automatically generates up-to-date libraries 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 and work like other component libraries for that framework.

  • How do Content Management System (CMS) Integrations work?

    Teams building Design Systems are looking to bring consistent, well-supported components to all corners of their app and web properties. For most teams, that means enabling web and marketing teams to drop in components from your Design System directly in their CMS workflow is key.

    Stencil integrates with many popular CMS solutions to bring your Design System directly to content creators in a way that works naturally with their existing tools, all while preserving the performance and accessibility benefits of a Stencil-built component system.

  • 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 is new to Design Systems and we need help making our initiative successful. Do you offer Advisory Services?

    Yes! The Stencil team is the same team that built 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.