# Shtab UI Kit

> Библиотека Vue 3 компонентов и design tokens Shtab: ~30 компонентов с TypeScript-типами, светлая и тёмная темы через CSS custom properties, пакеты `@shtabapp/ui-kit`, `@shtabapp/ui-kit-primitives`, `@shtabapp/ui-kit-tokens`.

## Документация

- [Установка](https://ui.shtab.app/getting-started/installation)
- [Стили и токены](https://ui.shtab.app/getting-started/styles-and-tokens)
- [Storybook](https://ui.shtab.app/getting-started/storybook)
- [Design tokens](https://ui.shtab.app/foundations/design-tokens)
- [Темизация](https://ui.shtab.app/foundations/theming)
- [CSS layers](https://ui.shtab.app/foundations/css-layers)
- [Типографика](https://ui.shtab.app/foundations/typography)
- [Формы](https://ui.shtab.app/patterns/forms)
- [Overlay / Dropdown](https://ui.shtab.app/patterns/overlays)
- [Списки](https://ui.shtab.app/patterns/lists)
- [Графики](https://ui.shtab.app/patterns/charts)

## Компоненты

- [SIcon](https://ui.shtab.app/primitives/s-icon): Примитив иконки с размерами на основе токенов.
- [SSpinner](https://ui.shtab.app/primitives/s-spinner): Индикатор загрузки (спиннер).
- [SProgressBar](https://ui.shtab.app/primitives/s-progress-bar): Горизонтальная полоса прогресса.
- [SSkeleton](https://ui.shtab.app/primitives/s-skeleton): Скелетон-заглушка для состояний загрузки.
- [SSeparator](https://ui.shtab.app/primitives/s-separator): Разделитель для визуального отделения групп контента.
- [SAvatar](https://ui.shtab.app/components/s-avatar): Аватар пользователя или сущности.
- [SAvatarGroup](https://ui.shtab.app/components/s-avatar-group): Группа аватаров со смещением (стек).
- [SButton](https://ui.shtab.app/components/s-button): Кнопка действия для форм и панелей инструментов.
- [SButtonGroup](https://ui.shtab.app/components/s-button-group): Группа кнопок с общим выбором (selection).
- [SCard](https://ui.shtab.app/components/s-card): Карточка-контейнер с заголовком и слотами контента.
- [SSegmentControl](https://ui.shtab.app/components/s-segment-control): Сегментированный переключатель с единственным выбором.
- [STab](https://ui.shtab.app/components/s-tab): Элемент вкладки для использования внутри `STabs`.
- [STabs](https://ui.shtab.app/components/s-tabs): Список вкладок: статические элементы или интеграция с роутером.
- [STag](https://ui.shtab.app/components/s-tag): Компактная метка (тег).
- [STagGroup](https://ui.shtab.app/components/s-tag-group): Группа тегов с обработкой переполнения.
- [SChip](https://ui.shtab.app/components/s-chip): Чип: статичный или с возможностью удаления.
- [SColorPalette](https://ui.shtab.app/components/s-color-palette): Палитра цветов: single-select row или grid из `SColorSwatch`.
- [SColorPicker](https://ui.shtab.app/components/s-color-picker): Выбор цвета: рекомендованная палитра, recent и custom editor через «+».
- [SCheckbox](https://ui.shtab.app/components/s-checkbox): Флажок (checkbox).
- [SRadio](https://ui.shtab.app/components/s-radio): Переключатель (radio).
- [SToggle](https://ui.shtab.app/components/s-toggle): Переключатель булева значения (switch).
- [SBadge](https://ui.shtab.app/components/s-badge): Бейдж: число или точка поверх элемента.
- [SInput](https://ui.shtab.app/components/s-input): Текстовое поле с подписью, иконками и сообщениями подсказки/ошибки.
- [SInlineInput](https://ui.shtab.app/components/s-inline-input): Inline contenteditable-поле с placeholder, multiline и сообщениями подсказки/ошибки.
- [STextarea](https://ui.shtab.app/components/s-textarea): Многострочное текстовое поле.
- [SInlineMessage](https://ui.shtab.app/components/s-inline-message): Строка подсказки или сообщения валидации под полем.
- [SBanner](https://ui.shtab.app/components/s-banner): Статичный inline-баннер внутри контейнера с контентом.
- [SToast](https://ui.shtab.app/components/s-toast): Presentational toast с обводкой и тенью для overlay.
- [SToastProvider](https://ui.shtab.app/components/s-toast-provider): Overlay-провайдер toast с очередью и auto-dismiss.
- [SLabel](https://ui.shtab.app/components/s-label): Подпись поля формы.
- [SListItem](https://ui.shtab.app/components/s-list-item): Строка списка для `SList`.
- [SList](https://ui.shtab.app/components/s-list): Список: статический, дерево, виртуализация и infinite scroll.
- [SSelect](https://ui.shtab.app/components/s-select): Combobox: выбор из списка с триггером SInput, поиском и multiple.
- [SDropdown](https://ui.shtab.app/components/s-dropdown): Выпадающая панель (floating overlay) с позиционированием относительно якоря.
- [SDropdownMenu](https://ui.shtab.app/components/s-dropdown-menu): Композиционная shell-панель для меню внутри `SDropdown`.
- [SChartLine](https://ui.shtab.app/components/s-chart-line): Линейный график.
- [SChartProgress](https://ui.shtab.app/components/s-chart-progress): График прогресса по снапшотам с бэкенда с reference area; маркеры при hover.
- [SChartStackedArea](https://ui.shtab.app/components/s-chart-stacked-area): График с накоплением (stacked area).
- [SChartStackedBar](https://ui.shtab.app/components/s-chart-stacked-bar): Столбчатый график с накоплением.
- [SChartPie](https://ui.shtab.app/components/s-chart-pie): Круговая диаграмма.
- [SChartSegmentedBar](https://ui.shtab.app/components/s-chart-segmented-bar): Пропорциональный сегментированный бар с легендой.
- [SChartWidget](https://ui.shtab.app/components/s-chart-widget): Карточка-виджет для чартов: заголовок, сворачивание, слот действий.
- [SChartHorizontalBar](https://ui.shtab.app/components/s-chart-horizontal-bar): Горизонтальная столбчатая диаграмма.
- [SChartMultiLine](https://ui.shtab.app/components/s-chart-multi-line): Линейный график с несколькими независимыми (не стекуемыми) сериями и зеркальной осью Y.
- [SChartBurnup](https://ui.shtab.app/components/s-chart-burnup): Burn-up график прогресса: цель/план/факт в процентах с линией «сегодня» и бейджем факт/план.

## Optional

- [llms-full.txt](https://ui.shtab.app/llms-full.txt): вся документация одним файлом
- [MCP-сервер](https://ui.shtab.app/llm/mcp-server): `npx -y @shtabapp/ui-kit-mcp` — API компонентов и токены для AI-ассистентов