{"id":13517047,"url":"https://github.com/commercetools/ui-kit","last_synced_at":"2026-02-24T10:13:49.140Z","repository":{"id":37405407,"uuid":"146916092","full_name":"commercetools/ui-kit","owner":"commercetools","description":"Component library 💅","archived":false,"fork":false,"pushed_at":"2025-05-14T16:17:05.000Z","size":88257,"stargazers_count":148,"open_issues_count":62,"forks_count":26,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-14T17:27:52.769Z","etag":null,"topics":["audit-frontend","commercetools-scp","design-system","frontend","javascript","react","ui-kit"],"latest_commit_sha":null,"homepage":"https://uikit.commercetools.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/commercetools.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-08-31T16:20:21.000Z","updated_at":"2025-05-09T19:13:15.000Z","dependencies_parsed_at":"2024-02-17T12:27:08.743Z","dependency_job_id":"caa69edb-f1bc-4d70-b75d-1e452e76c4cb","html_url":"https://github.com/commercetools/ui-kit","commit_stats":{"total_commits":3256,"total_committers":67,"mean_commits":48.59701492537314,"dds":0.8685503685503686,"last_synced_commit":"a629568d7b896aecf6bbf3be0adbd175424c3b96"},"previous_names":[],"tags_count":13893,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/commercetools%2Fui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/commercetools","download_url":"https://codeload.github.com/commercetools/ui-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198372,"owners_count":22030954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audit-frontend","commercetools-scp","design-system","frontend","javascript","react","ui-kit"],"created_at":"2024-08-01T05:01:29.036Z","updated_at":"2026-02-24T10:13:49.113Z","avatar_url":"https://github.com/commercetools.png","language":"TypeScript","readme":"\u003ch2 align=\"center\"\u003e🎹 commercetools UI Kit 💅\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/commercetools/ui-kit\"\u003e\u003cimg alt=\"Logo\" src=\"https://raw.githubusercontent.com/commercetools/ui-kit/main/logo.png\" /\u003e\u003c/a\u003e\u003cbr /\u003e\u003cbr /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/@commercetools-frontend/ui-kit\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@commercetools-frontend/ui-kit\" alt=\"Latest release (latest dist-tag)\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/@commercetools-frontend/ui-kit\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@commercetools-frontend/ui-kit/next\" alt=\"Latest release (next dist-tag)\" /\u003e\u003c/a\u003e \u003ca href=\"https://percy.io/commercetools-GmbH/merchant-center-application-kit\"\u003e\u003cimg src=\"https://percy.io/static/images/percy-badge.svg\" alt=\"This project is using Percy.io for visual regression testing\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=@commercetools-frontend/ui-kit\"\u003e\u003cimg src=\"https://badgen.net/bundlephobia/minzip/@commercetools-frontend/ui-kit\" alt=\"Minified + GZipped size\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/commercetools/ui-kit/blob/main/LICENSE\"\u003e\u003cimg src=\"https://badgen.net/github/license/commercetools/ui-kit\" alt=\"GitHub license\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e✨ Component library based on our design system 🛠\u003c/i\u003e\n\u003c/p\u003e\n\n\u003e If you are building **Custom Applications** for the Merchant Center, be sure to check out our [documentation](https://docs.commercetools.com/custom-applications)\n\n\u003e Interactive documentation of UI Kit components can be found in our [Storybook](https://uikit.commercetools.com/)\n\n# Getting started\n\nThe UI Kit is a set of React components that follows commercetools [Design System](#design-system).\n\n# Need Help?\n\nIn case you have any questions about or issues with the tools and components provided in this repository, please reach out to our [Support team](https://support.commercetools.com).\n\n# Using individual packages\n\nEach UI Kit component is published as a single NPM package under the scope `@commercetools-uikit`. This is useful if you only need a bunch of React components and do not want to have bigger bundle.\n\nFor example:\n\n```js\nimport PrimaryButton from '@commercetools-uikit/primary-button';\nimport SpacingsStack from '@commercetools-uikit/spacings-stack';\nimport { AngleDownIcon } from '@commercetools-uikit/icons';\n```\n\n# Using presets\n\nIf you plan to use more components, you can also use some of the [preset packages](https://github.com/commercetools/ui-kit/tree/main/presets) that group multiple packages together. This is useful to reduce the number of dependencies and imports.\n\nFor example:\n\n```js\nimport { PrimaryButton } from '@commercetools-uikit/buttons';\nimport Spacings from '@commercetools-uikit/spacings';\n```\n\n## All-in-one\n\nThere is also a preset package that re-exports ALL UI Kit components: `@commercetools-frontend/ui-kit`.\n\n\u003e This package is also used for backwards compatibility after we started splitting up the components into single packages.\n\n```js\nimport {\n  PrimaryButton,\n  Spacings,\n  AngleDownIcon,\n} from '@commercetools-frontend/ui-kit';\n```\n\n# Required peer dependencies\n\nEach UI Kit package comes with some required [peer dependencies](https://docs.npmjs.com/files/package.json#peerdependencies) to be installed by the consumer.\n\nDepending on which UI Kit packages you use, make sure to have the related peer dependencies installed.\n\nMost of the time the required peer dependencies include `react`, `react-dom`, `react-intl`.\n\n# Design System\n\n\u003e A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.\n\nDesign Systems are becoming more and more useful nowadays, as design and technology strive to find a perfect balance between them.\n\nThe UI Kit project is the home of commercetools Design System and its implementation in the form of React components.\n\nThe package `@commercetools-uikit/design-system` exposes the design variables and tokens used to define design rules and constraints for commercetools products.\n\n## Importing css variables in css files\n\nYou will need a [postcss-import](https://github.com/postcss/postcss-import) plugin, and a postcss variable plugin: either [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) or [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables) would work.\n\n```css\n@import '@commercetools-uikit/design-system/materials/custom-properties.css';\n\n.container {\n  padding: var(--spacing-l);\n}\n```\n\n```js\n// wherever you process your CSS\npostcss([postcssImportPlugin(), postcssCustomProperties()]);\n```\n\n### Using `postcss-custom-properties` and `importFrom`\n\nThe css variables can also be injected using [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties), removing the need to import them directly inside your css files.\n\n```css\n/* no import required! */\n.container {\n  padding: var(--spacing-l);\n}\n```\n\n```js\n// wherever you process your CSS\npostcss([\n  postcssCustomProperties({\n    preserve: false,\n    importFrom: require.resolve(\n      '@commercetools-uikit/design-system/materials/custom-properties.css'\n    ),\n  }),\n]);\n```\n\n## Accessing JavaScript variables and design tokens\n\nYou can also access the JavaScript variables like this\n\n```js\nimport { designTokens } from '@commercetools-uikit/design-system';\n\nconst primary = designTokens.colorPrimary;\n```\n\n\u003e Please look at the [`design-tokens.ts`](https://github.com/commercetools/ui-kit/blob/main/design-system/src/design-tokens.ts) itself to inspect which variables are available.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercetools%2Fui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcommercetools%2Fui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcommercetools%2Fui-kit/lists"}