{"id":15739658,"url":"https://github.com/salute-developers/plasma","last_synced_at":"2026-06-26T07:01:43.038Z","repository":{"id":37078146,"uuid":"485473632","full_name":"salute-developers/plasma","owner":"salute-developers","description":"Salute Design System","archived":false,"fork":false,"pushed_at":"2026-06-22T13:47:11.000Z","size":2115268,"stargazers_count":46,"open_issues_count":176,"forks_count":28,"subscribers_count":8,"default_branch":"dev","last_synced_at":"2026-06-22T14:15:47.403Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/salute-developers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-04-25T17:42:45.000Z","updated_at":"2026-06-22T12:36:05.000Z","dependencies_parsed_at":"2023-09-25T21:24:46.328Z","dependency_job_id":"4a3aeb12-c156-46ea-8f48-93440f481d0b","html_url":"https://github.com/salute-developers/plasma","commit_stats":{"total_commits":6931,"total_committers":73,"mean_commits":94.94520547945206,"dds":0.6491126821526475,"last_synced_commit":"3702ac0ad05d9ce30ca8774924080caa8ee22215"},"previous_names":[],"tags_count":20698,"template":false,"template_full_name":null,"purl":"pkg:github/salute-developers/plasma","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salute-developers%2Fplasma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salute-developers%2Fplasma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salute-developers%2Fplasma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salute-developers%2Fplasma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salute-developers","download_url":"https://codeload.github.com/salute-developers/plasma/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salute-developers%2Fplasma/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34694786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-04T02:05:33.417Z","updated_at":"2026-06-26T07:01:43.013Z","avatar_url":"https://github.com/salute-developers.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plasma\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"800\" src=\"https://user-images.githubusercontent.com/1813468/98610527-d37ba500-2300-11eb-87c3-80cc1c08ecb4.png\" alt=\"plasma\" /\u003e\n\u003c/p\u003e\n\nИспользование дизайн-системы Plasma позволяет реализовать [Canvas App](https://bit.ly/3Mx0UQq) как часть экосистемы виртуальных ассистентов семейства \"Салют\" и клиентские приложения B2B- и B2C-ориентированности. Все текущие приложения в экосистеме Salute реализованы с помощью Plasma.\n\n## Состав:\n\n-   @salutejs/plasma-ui\n-   @salutejs/plasma-web\n-   @salutejs/plasma-b2c\n-   @salutejs/plasma-tokens\n-   @salutejs/plasma-tokens-web\n-   @salutejs/plasma-tokens-b2c\n-   @salutejs/plasma-icons\n\n### plasma-ui\n\nПакет с набором готовых компонентов и утилит для создания Canvas App. Компоненты реализованы с помощью [React](https://reactjs.org/). Для компонентов доступны [Storybook](https://bit.ly/3xRatFG) и [документация](https://bit.ly/3HWggy3).\n\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-ui?label=%40salutejs%2Fplasma-ui\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-ui)\n\n### plasma-web\n\nПакет с набором готовых компонентов для создания веб-приложений направленных на B2B-сегмент. [Документация](https://bit.ly/3OtwX5v) и [Storybook](https://bit.ly/3EH1x7b).\n\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-web?label=%40salutejs%2Fplasma-web\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-web)\n\n### plasma-b2c\n\nПакет с набором готовых компонентов для создания веб-приложений ориентированных на B2C-сегмент. [Документация](https://bit.ly/3OtwX5v) и [Storybook](https://bit.ly/44CjWib).\n\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-b2c?label=%40salutejs%2Fplasma-b2c\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-b2c)\n\n### plasma-tokens, plasma-tokens-web, plasma-tokens-b2c\n\nПакеты с набором _дизайн-токенов_. В пакет входят типографические и цветовые константы. Дизайн-токены поставляются в качестве [CSS custom propperties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) и JavaScript переменных. Перед использованием рекомендуется ознакомится с документацией по [токенам](https://bit.ly/3KflkeS).\n\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-tokens?label=%40salutejs%2Fplasma-tokens\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-tokens)\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-tokens-web?label=%40salutejs%2Fplasma-tokens-web\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-tokens-web)\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-tokens-b2c?label=%40salutejs%2Fplasma-tokens-b2c\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-tokens-b2c)\n\n### plasma-icons\n\nПакет с набором иконок, которые доступны к просмотру в [хранилище](https://bit.ly/42hgVSf), а также в [Storybook](https://bit.ly/3LhwBwC) и [документации](https://bit.ly/3xQMjuM).\n\n[![npm ui](https://img.shields.io/npm/v/@salutejs/plasma-icons?label=%40salutejs%2Fplasma-icons\u0026style=for-the-badge)](https://www.npmjs.com/package/@salutejs/plasma-icons)\n\n## Быстрый старт\n\n`Canvas App` это web-приложение, для его создания вам потребуется:\n\n-   `Node.js` \u0026 `npm` [установка](https://nodejs.org/ru/)\n-   `Create React App` – для быстрого создания основы вашего приложения. [CRA](https://create-react-app.dev/docs/getting-started#quick-start)\n-   `React` Как основа для web интерфейса. Погружение для новичков: https://ru.reactjs.org/tutorial/tutorial.html\n\n### Установка\n\nПосле создания [основы приложения](https://create-react-app.dev/docs/getting-started#quick-start):\n\n```sh\nnpm i -S styled-components@5.1.1 @salutejs/plasma-ui @salutejs/plasma-tokens @salutejs/plasma-icons\n```\n\n_Компоненты реализованы с помощью [styled-components](http://styled-components.com/). Поэтому необходимо поставить их в зависимость._\n\nNB: Если вы решили не использовать `Create React App`, то вам потребуется установить `react` и `react-dom`:\n\n```sh\nnpm i -S react react-dom\n```\n\nБолее подробно можно ознакомиться на странице [документации](https://bit.ly/3HWggy3#%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0).\n\n### Использование\n\n```jsx\n// ./src/App.jsx\nimport React from 'react';\n\nimport { Button } from '@salutejs/plasma-ui';\n\nfunction App() {\n    return (\n        \u003cdiv className=\"App\"\u003e\n            \u003cp\u003e\n                \u003cButton view=\"primary\"\u003eHello Plasma\u003c/Button\u003e\n            \u003c/p\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default App;\n```\n\nБолее подробно можно ознакомиться на странице [документации](https://bit.ly/3HWggy3#%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5).\n\n## Обратная связь\n\nРазработка дизайн-системы Plasma ведется в репозитории https://github.com/salute-developers/plasma.\nЕсли вы хотите добавить новый компонент, вы можете прислать пулл-реквест следуя [правилам разработки](./CONTRIBUTING.md). Также вы можете [завести задачу](https://github.com/salute-developers/plasma/issues/new) на создание нового компонента или описать некоректное поведение текущего.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalute-developers%2Fplasma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalute-developers%2Fplasma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalute-developers%2Fplasma/lists"}