> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# UI-кит и блоки

Общие компоненты, дизайн-токены и каталог блоков.

## Прежде чем начать

Откройте загруженный проект supastack в Visual Studio Code, используя «Файл» → «Открыть папку», затем выберите «Терминал» → «Новый терминал». Корень репозитория — это папка, содержащая package.json, приложения и пакеты. Запустите команду ниже и оставьте терминал открытым. Если команда не распознается, завершите руководство по установке инструмента, прежде чем продолжить.

Сначала прочтите руководство по платформе. Сервер — это процесс приложения, который отвечает на запросы браузера или телефона. Веб читает apps/web/.env.local, Expo читает apps/mobile/.env.local, а команды миграции базы данных читают корневой .env. Демонстрация без базы данных / панели мониторинга отделена от реальных учетных записей / аутентификации, для которых необходимо перенести Postgres. Для оформления заказа только на телефоне или компьютере требуется отдельно работающий веб-сервер.

[Установите инструменты и получите код](https://supastack.dev/ru/docs/web/before-you-start.md)

[Изучение команд, файлов и конфигурации](https://supastack.dev/ru/docs/web/terminal-basics.md)

[Пройдите руководство по первому запуску в Интернете](https://supastack.dev/ru/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## Настройка и конфигурация

packages/ui-web содержит общие продуктовые компоненты (кнопки, поля ввода, карточки, бейджи, диалоги, части оболочки), а packages/design-tokens — источник токенов, который app-theme.css отображает в CSS-переменные. Маршрут /kit-blocks монтирует каталог блоков — составные секции, которые можно перенести в свой продукт.

apps/mobile потребляет packages/ui-native для эквивалентных нативных примитивов, так что стилизация поверхностей остаётся платформенной, а контракты — общими.

```
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)
```


## Рабочий процесс внедрения

Собирайте экраны сначала из общих компонентов; прибегайте к кастомному элементу только когда кит не может выразить паттерн. Новые общие части принадлежат ui-web со стилизацией на токенах, чтобы каждый пакет темы применялся автоматически.

Держите маркетинговые компоненты (src/marketing) вне продуктовых поверхностей и наоборот — две системы каркаса намеренно разделены.


## Проверка и устранение неполадок

Проверяйте новый компонент на каждом пресете density/radius/font и как минимум на одном светлом и одном тёмном пакете. Проверьте фокус с клавиатуры, разметку на 320px и reduced motion; галерея кита на /settings/appearance — самый быстрый обход.


## Вперёд

[Локали и тексты](https://supastack.dev/ru/docs/web/i18n.md)