# @salutejs/plasma-asdk

> Salute Design System / React UI kit for Assistant web applications

Latest version **0.395.0** (published 2026-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @salutejs/plasma-asdk
pnpm add @salutejs/plasma-asdk
yarn add @salutejs/plasma-asdk
bun add @salutejs/plasma-asdk
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.395.0 |
| Published | 2026-09-18 |
| First published | 2023-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 767.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 50 |
| Author | Salute Frontend Team |
| Maintainers | yeti-or, salute-eva |
| Keywords | design-system, react-components, ui-kit, react |

## Links

- npm: https://www.npmjs.com/package/@salutejs/plasma-asdk
- Repository: https://github.com/salute-developers/plasma
- Homepage: https://github.com/salute-developers/plasma#readme
- Issues: https://github.com/salute-developers/plasma/issues
- npm.io page: https://npm.io/package/@salutejs/plasma-asdk

## Dependencies (4)

- [@salutejs/plasma-typo](https://npm.io/package/@salutejs/plasma-typo.md) 0.54.0
- [@salutejs/plasma-tokens](https://npm.io/package/@salutejs/plasma-tokens.md) 1.155.0
- [@salutejs/plasma-new-hope](https://npm.io/package/@salutejs/plasma-new-hope.md) 0.381.0
- [@salutejs/plasma-tokens-b2b](https://npm.io/package/@salutejs/plasma-tokens-b2b.md) 1.66.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.395.0 (latest) — 2026-09-18
- 0.395.0-canary.3183.35539068504.0 (canary) — 2026-09-20
- 0.395.0-next-sbcom.0 (next-sbcom) — 2026-09-15
- 0.394.0-dev.0 (dev) — 2026-09-15
- 0.385.0-next-insol.0 (next-insol) — 2026-07-22
- 0.379.0-next-platform-ai.0 (next-platform-ai) — 2026-06-08
- 0.395.0-canary.3182.35349480073.0 — 2026-09-18
- 0.395.0-canary.3180.35339219797.0 — 2026-09-18
- 0.394.1-canary.3181.35338826530.0 — 2026-09-18
- 0.394.0 — 2026-09-16
- 0.395.0-canary.3169.35074423993.0 — 2026-09-16
- 0.395.0-canary.3168.35010750742.0 — 2026-09-15
- 0.395.0-canary.3169.34976384316.0 — 2026-09-15
- 0.393.0-canary.3168.34971443797.0 — 2026-09-15
- 0.393.0-canary.3166.34967070165.0 — 2026-09-15
- … 6095 more at https://npm.io/package/@salutejs/plasma-asdk/versions

## README

# Библиотека компонентов Plasma ASDK

Реализация компонентов для создания веб-приложений.

## Использование

Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);

Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;

Использование `styled-components` на проект необязательно, так же как и использование `typescript`.

**Но** для того чтобы компоненты работали корректно необходимо установить `styled-components`.

### Установка пакета

```bash
$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @salutejs/plasma-asdk @salutejs/plasma-typo
```

## Настройка

Создайте компонент для подключения глобальных стилей:

```jsx title="GlobalStyle.tsx"
import { createGlobalStyle } from 'styled-components';
import { standard } from '@salutejs/plasma-typo';
import { stylesSaluteLight } from '@salutejs/plasma-asdk/themes';

const ThemeStyle = createGlobalStyle(stylesSaluteLight);
const TypoStyle = createGlobalStyle(standard);

export const GlobalStyle = () => (
    <>
        <ThemeStyle />
        <TypoStyle />
    </>
);
```

### Корень приложения

В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:

-   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
-   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.

Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в plasma-asdk);

### Использование компонентов

Все компоненты доступны из папки `components` или напрямую из пакета:

```jsx
// App.tsx
import { Button } from '@salutejs/plasma-asdk';

import { tokens } from '@salutejs/plasma-asdk/tokens';

export const App = () => {
    return (
        <Button>Hello, Plasma!</Button>

        <p style={{color: tokens.textAccentAthena}}>
            Token usage example
        </p>
    );
};
```

---
_Source: https://npm.io/package/@salutejs/plasma-asdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._