Skip to main content

Zeta vs ZDS

There has been some confusion regarding the two sets of libraries we maintain: Zeta and ZDS. This guide seeks to address these concerns by providing a clear and concise overview of each library’s unique characteristics and their respective roles within our development ecosystem.

The ZDS libraries are a collection of older components that have served us well over the years. However, as we look to the future, these libraries are set to be gradually replaced by the more modern and versatile Zeta libraries. The transition to Zeta reflects our commitment to adopting newer technologies and methodologies that enhance performance, scalability, and developer experience. This guide will detail these differences and outline the transition plan to ensure a smooth migration for all developers.

To see which components have been created in each library, see Component development status

Zeta libraries​

These libraries have been meticulously constructed from the ground up, with a focus on aligning components as closely as possible with our Figma designs, which serve as our definitive source of truth. Each component undergoes a rigorous validation process by our design team before coding begins, ensuring adherence to design specifications. We’ve implemented automation to extract data directly from Figma, capturing essential tokens for sizes, colors, radius, and typography. Additionally, we utilize Figma for golden testing, programmatically comparing the coded components against the Figma designs within our test suite to guarantee high-quality outputs. While these libraries can still be used alongside their ZDS counterparts, the ZDS libraries are gradually being phased out, with only the Zeta libraries remaining in active development.

In both libraries, we employ CI/CD scripts to uphold high quality standards. Each pull request undergoes thorough analysis, linting, and a comprehensive test suite before approval. This process includes verifying that the designs match the Figma specifications.

  • zeta-web - The Zeta Web component library is constructed using Lit, a modern framework for building lightweight, fast web components. This choice allows it to be highly versatile, unlike ZDS React, as it can be seamlessly integrated into nearly any web project, including those built with Angular, React, Vue, and other frameworks that support web components. Additionally, these components can be used directly with plain HTML, offering flexibility for a wide range of applications. Designed with responsiveness in mind, the components are optimized to deliver a consistent user experience across desktop, tablet, and mobile platforms.

  • zeta_flutter - The Zeta Flutter library leverages Flutter’s speed and fantastic user and developer experience for creating high-quality applications. These components can be integrated into any Flutter app on iOS, Android, Web, Windows, macOS and Linux, and they also allow Flutter to serve as a UI layer on top of pre-existing native code. Designed for versatility, these components ensure a seamless experience across desktop, tablet, and mobile platforms. While they can be used alongside ZDS components, it’s important to note that the ZDS libraries are being phased out, with Zeta taking the lead in active development to embrace more modern and efficient solutions.

ZDS libraries​

The ZDS libraries have historically provided a comprehensive suite of components across various platforms, offering extensive functionality for diverse development needs. However, these libraries are currently in the process of being deprecated as we transition to the more modern and efficient Zeta libraries. While users are encouraged to migrate to Zeta, which aligns better with our current design and development best practices, it’s recognized that the ZDS libraries still contain a broader range of components essential for certain projects. Consequently, while it may be unavoidable to use ZDS in some instances, efforts should be made to minimize reliance on them and prepare for future developments through Zeta’s expanding capabilities.

  • zds-react - This was our former flagship component library, specifically designed for the React ecosystem. While it offers a comprehensive suite of components and can be effectively used alongside the newer Zeta Web library, its primary limitation is its exclusivity to React. This restriction limits flexibility for projects that require compatibility with other web frameworks. Additionally,the developer experience of working with ZDS React is less intuitive compared to more modern libraries. As we transition to Zeta libraries, which promise broader compatibility and improved usability, developers should consider integrating Zeta Web components to enhance their projects while leveraging existing assets.

  • zds_flutter - This library originated as the Reflexis component library, leading to components that do not align with the current Zebra design system due to their development during a transitional period. This results in design inconsistencies. Additionally, it relies on numerous external packages, some of which are no longer actively maintained, posing challenges in compatibility and security. However, it can still be used alongside the newer Zeta Flutter library, which, although containing fewer components, offers higher quality and better alignment with modern standards. As we transition to more consistent solutions, developers should consider integrating Zeta Flutter components for future projects.

  • zds-android - The ZDS Android library includes a limited subset of components from the Zebra Design System, developed using Android Kotlin and XML rather than the more modern Jetpack Compose. Currently, there is no direct replacement for this library within our offerings. However, developers focused on mobile development should consider using Flutter for a more comprehensive and versatile solution that aligns with contemporary design and development practices.