Migration overview

Migrating away from Component Library to a new solution can be a daunting task. This section will provide detailed guidance on how to (gradually) remove Component Library from your project and migrate to the Cimpress UI design system.

Component Library vs Cimpress UI

Component Library was a collection of UI elements that could be reused all across Cimpress Technology. There was no dedicated Component Library team - instead, the library relied on individual contributions from Cimpress designers and developers. The components were highly customizable by design, and they could be modified based on the needs and wishes of every project.

Cimpress UI is first and foremost a design system. In addition to providing reusable UI building blocks, it also dictates how and when they should be used. It is expected that teams using Cimpress UI adhere to the principles, standards, guidelines, and patterns established by the Cimpress UI core team in order to maintain consistency and uniformity across all Cimpress Technology products. Deviating from the design system (e.g., by modifying the components, or introducing custom solutions where a reusable component exists) is discouraged. Any issues with the system design should be brought to the attention of the Cimpress UI team.

With that in mind, it is important to realize that migrating from Component Library to Cimpress UI is not just a matter of replacing the old components with new ones. It is also a matter of adapting your projects to follow the guidelines established by the design system.

Migration benefits

A unified design language
Cimpress UI dictates certain design choices, streamlining the design process and ensuring consistency among all Cimpress applications.
Extensive documentation
Detailed installation guides, usage guidelines, recipes for common design patterns - all you need and more, enhanced with examples.
Keyboard operability
All Cimpress UI components are fully operable using a keyboard, enabling power users to complete tasks faster.
Improved focus handling
Focused elements show a clear focus ring, and focus is automatically restored when exiting an overlay.
Compatibility with assistive technologies
Cimpress UI components are accessible for assistive technologies, enabling you to build workflows that can be navigated by a wide spectrum of users.
A modernized workflow
Cimpress UI provides out-of-the-box support for modern solutions like ESM modules, server-side rendering, and more.
Localization support
Cimpress UI components are i18n-ready, enabling you to adapt your applications to various languages and regions.
Scoped styles
Cimpress UI doesn’t “pollute” your application with global styles - all CSS is scoped to the element of your choice.
Easier future upgrades
With the design system in place, upgrades to future versions of Cimpress UI will be streamlined, and even automated in a lot of cases.