chore(scaffold): add template intro.mdx

scaffold/template-docs/docs/intro.mdx

@@ -8,3 +8,83 @@ slug: /
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+# Библиотека компонентов "{{ upperCase name }}"
+
+Реализация компонентов для создания веб-приложений.
+
+## Использование
+
+Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);
+
+Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;
+
+Использование `styled-components` на проект необязательно, так же как и использование `typescript`.
+
+**Но** для того чтобы компоненты работали корректно необходимо установить:
+
+- `styled-components` версии `5.3.1`
+
+### Установка пакета
+
+```bash
+$ npm install --save react react-dom
+$ npm install --save styled-components
+$ npm install --save @salutejs/{{ name }} @salutejs/plasma-typo @salutejs/plasma-tokens
+```
+
+## Настройка
+
+Создайте компонент для подключения глобальных стилей:
+
+```jsx title="GlobalStyle.tsx"
+import { createGlobalStyle } from 'styled-components';
+import { standard } from '@salutejs/plasma-typo';
+import { {{ theme }}__light } from '@salutejs/plasma-tokens';
+
+const ThemeStyle = createGlobalStyle({{ theme }}__light);
+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` и подключите стили в нем.
+
+Для корректной работы `SSR - server side rendering` приложение нужно обернуть `SSRProvider`;
+
+### Использование компонентов
+
+Все компоненты доступны из папки `components` или напрямую из пакета:
+
+```jsx
+// App.tsx
+import styled from 'styled-components';
+import { Button } from '@salutejs/{{ name }}';
+import { textAccent } from '@salutejs/plasma-tokens/brands/{{ theme }}';
+
+export const App = () => {
+    const StyledP = styled.p`
+        color: ${textAccent};
+    `;
+
+    return (
+        <>
+            <Button>Hello, Plasma!</Button>
+
+            <StyledP>
+                Token usage example
+            </StyledP>
+        </>
+    );
+};
+```
+