Установка

Shtab UI Kit публикуется в публичный npm (registry.npmjs.org).

Пакеты

Пакет	Назначение
@shtabapp/ui-kit	Составные runtime-компоненты (SButton, SInput, …)
@shtabapp/ui-kit-tokens	Design tokens, темы, основа CSS layers
@shtabapp/ui-kit-primitives	Низкоуровневые примитивы (SIcon, SSpinner, …)

tokens и primitives — зависимости @shtabapp/ui-kit, отдельно их ставить не нужно: весь их JS-API реэкспортируется из @shtabapp/ui-kit (включая subpath-входы @shtabapp/ui-kit/tokens, @shtabapp/ui-kit/icon, @shtabapp/ui-kit/spinner, @shtabapp/ui-kit/progress-bar, @shtabapp/ui-kit/skeleton).

Установка

pnpm add @shtabapp/ui-kit

@vueuse/core — peer dependency для primitives и components; установите его в host-приложении.

Стили

Подключайте стили библиотеки до стилей приложения — одним импортом:

import '@shtabapp/ui-kit/styles.css'

Агрегат подключает слои в правильном порядке: tokens → primitives → components → app. Гранулярные входы (@shtabapp/ui-kit-tokens/styles.css, @shtabapp/ui-kit-primitives/styles.css, @shtabapp/ui-kit/components.css) остаются доступны — порядок слоёв обязателен.

Переменные темы объявлены на :root и наследуются по всему документу — компоненты темизированы сразу после импорта стилей, отдельная обёртка для этого не нужна. Класс .s-ui-root — необязательный хук: оборачивайте в него поддерево, только если переопределяете токены или задаёте scoped-тему для секции (Storybook и docs так делают для превью).

SIcon асинхронный (SVG загружается лениво) — компонентам с иконками нужен <Suspense>-boundary выше по дереву, иначе иконка молча не отрендерится:

<Suspense>
  <SIcon name="rocket" />
</Suspense>

Точечный импорт

import { SButton } from '@shtabapp/ui-kit/button'
import { SIcon } from '@shtabapp/ui-kit/icon'
import { setDocumentTheme } from '@shtabapp/ui-kit/tokens'

Далее: Стили и токены, интерактивные примеры — Storybook.