Overview

The UI Kit is a set of React components that follows commercetools Design System. It offers a collection of reusable components with clear standards that can be used to build custom applications for the Merchant Center.

Features

• Individual packages: Each UI Kit component is published as a single NPM package under the scope @commercetools-uikit, allowing for selective use of React components without adding unnecessary bulk to the bundle.
• Preset packages: For those planning to use multiple components, preset packages are available that group multiple packages together. This reduces the number of dependencies and imports required.
• All-in-one package: There is also a preset package, @commercetools-frontend/ui-kit, that re-exports all UI Kit components. This package is useful for backwards compatibility after the components were split into single packages.
• Required peer dependencies: Each UI Kit package comes with required peer dependencies that need to be installed by the consumer. Make sure to have the related peer dependencies installed based on the UI Kit packages you are using.

Installation

To install the UI Kit and its individual packages:

1. Use npm to install the desired UI Kit package(s), replacing {package-name} with the specific package name:

npm install @commercetools-uikit/{package-name}

To use preset packages and reduce dependencies, install the desired preset package instead:

npm install @commercetools-uikit/{preset-package-name}

To install the all-in-one package for backwards compatibility:

npm install @commercetools-frontend/ui-kit

Summary

The UI Kit is a collection of React components that follow the commercetools Design System. It provides individual packages and preset packages for flexible usage and reduced dependencies. The installation guide explains how to install the UI Kit and its packages.