astro-de-design-systems

commercetools UI Kit 💅

✨ Component library based on our design system 🛠

If you are building Merchant Center Applications, be sure to check out our application-kit

Installation

$ yarn add @commercetools-frontend/ui-kit

# or

$ npm install --save @commercetools-frontend/ui-kit

Required peer dependencies

UI Kit comes with some peer dependencies which are required to be available in any project consuming it. These include but may not be limited to: moment, moment-timezone, react, react-dom, react-intl and react-router-dom. An up-to-date list with their respective version ranges can be found in the package.json. Please make sure all packages are installed within your application for UI Kit to be able to work as expected.

Importing

The package's main export contains all UI components.

import {
  Text,
  TextInput,
  PrimaryButton,
  // etc.
} from '@commercetools-frontend/ui-kit';

Importing CSS variables

When you are developing your application using UI Kit components, chances you want to use the same design tokens as our design system. We provide them through both CSS variables and JavaScript variables.

Show details

We expose the CSS variables from the @commercetools-frontend/ui-kit/materials/custom-properties.css file.

Importing css variables in css files

You will need a postcss-import plugin, and a postcss variable plugin: either postcss-custom-properties or postcss-css-variables would work.

@import '@commercetools-frontend/ui-kit/materials/custom-properties.css';

.container {
  padding: var(--spacing-l);
}

// wherever you process your CSS
postcss([postcssImportPlugin(), postcssCustomProperties()]);

Using postcss-custom-properties and importFrom

The ui-kit css variables can also be injected using postcss-custom-properties, removing the need to import them directly inside your css files.

/* no import required! */
.container {
  padding: var(--spacing-l);
}

// wherever you process your CSS
postcss([
  postcssCustomProperties({
    preserve: false,
    importFrom: require.resolve(
      '@commercetools-frontend/ui-kit/materials/custom-properties.css'
    ),
  }),
]);

Accessing JavaScript variables and design tokens

You can also access the JavaScript variables like this

import { customProperties } from '@commercetools-frontend/ui-kit';

const primary = customProperties.colorPrimary;

Please look at the file itself to inspect which variables are available (documentation will be provided in the future).

Motivation

• Declarative components serving as a design guide
• Shared independently from the application's code base
• Used across different apps consumed by different teams
• Shared language between developers and designers

Documentation and Storybook

Available at https://uikit.commercetools.com.