Accessible Web Components Library with Stencil.js and React

We support companies and institutions in creating modern frontend foundations for long-term maintainable digital products. Especially for component libraries in public-sector and regulated environments, we combine accessibility, technical architecture, documentation, and delivery processes into one reliable overall solution. If your focus is on scalable frontends, component architecture, and stable development, you can find more information on our React agency page.

Our core strengths:

• Accessible component development: Support and further development of reusable UI building blocks based on current accessibility standards
• Stencil.js & React: Modern component architectures for flexible use across different frontend setups
• Documentation & design system alignment: Structured public documentation and production-oriented developer experience
• CI/CD & process optimization: Improvement of build, test, and release processes for sustainable delivery
• Testing & quality assurance: Strong technical standards through automated testing and accessibility-focused validation
• Modernization within existing systems: Pragmatic further development of existing libraries, processes, and documentation landscapes

Our ambition is to build or strengthen accessible and technically resilient component platforms that make teams more productive over the long term.

Clear and measurable results:

• Accessible component foundation for public applications: The existing library was further developed so that accessibility requirements could be systematically translated into reusable web components.
• Stencil.js as the basis for broad reuse: The technological focus on Stencil.js ensured that a component base was created or maintained that is designed to be framework-independent and suitable for different public-sector projects.
• Accelerated development instead of isolated one-off solutions: Our contribution helped the library evolve faster and in a more structured way without losing the character of an established platform.
• Clean React integration for production frontends: The library was supported and extended so that it could integrate more effectively into modern React-based applications.
• Improved delivery and release processes: Optimized CI/CD workflows reduced friction in development and publishing while improving the maintainability of the project.
• Higher quality through internal accessibility testing: The additional review by an internal accessibility team improved usability and helped establish accessibility not just as a development goal, but as a verifiable quality dimension.
• Transparent public documentation: The maintained and expanded documentation makes onboarding, implementation, and long-term use easier for development teams. Both package-based distribution and documented component examples are publicly visible.

The main objective was to further develop the existing web components library in a way that would allow it to be used reliably in public-sector and complex digital applications while remaining maintainable over the long term.

• Supporting and accelerating component development: Rather than rebuilding the library from scratch, we supported the existing development effort in the areas where technical progress, cleaner delivery, and better scalability created the greatest impact.
• Agile further development of accessible components: Design and implementation of reusable UI building blocks with a focus on accessibility, semantic structures, robust interactions, and consistent usability.
• Stencil.js as the technological foundation for broad usability: The components were further developed on the basis of Stencil.js and TypeScript so that they would not be tied to a single frontend framework, but could instead be used as flexibly as possible across different applications and public-sector projects. The publicly available package explicitly describes the component base as Stencil-based.
• React integration for productive use: Additional work in the React ecosystem ensured that the component library could be integrated cleanly into modern frontend applications and reused productively. Public packages and integration paths show that React is a relevant usage context within this ecosystem.
• Optimization of internal pipelines with GitHub Actions and CI/CD: Build, test, and release processes were selectively improved so that changes could be built, validated, and published more efficiently. Publicly documented publishing and versioning processes underline the library’s CI and release focus.
• Maintenance of public documentation: The public documentation was further developed using structures close to Next.js and Docusaurus so that development teams could understand, evaluate, and use the library more quickly in production. The public documentation provides component-based entry points and integration paths.
• Testing and quality assurance: In addition to automated tests, the library was also reviewed by an internal accessibility team. This resulted in components that were not only technically functional, but also validated as accessible in practice.

Stencil.js and React formed the technological foundation for accessible and scalable UI standards in this project. Based on this setup, accessible web components, consistent interaction patterns, and a reusable component foundation were further developed. Stencil.js was especially important because it allows the library to remain as flexible as possible across different projects and technical environments. TypeScript, Next.js, Docusaurus, pnpm, as well as structured testing and delivery processes with Playwright, further supported the long-term maintainability and quality of the solution. Publicly visible elements also include package-based distribution and a documented component ecosystem.