Virstak UI
Канонические стили платформы: поля, навигация, подсказки. Подключайте
vui-components.css вместе с токенами.
Единая шкала --control-h-*: small 28px · medium 34px · large 42px.
Кнопка, инпут, селектор и гибридный поиск выровнены по высоте и фону поля.
Класс .vbtn, пресеты vbtn--*, размеры
vbtn--sm / vbtn--lg
Пресеты
Размеры
Состояния
Класс .vinput, обёртка с иконкой —
.vinput-wrap--search
Проверьте формат адреса
Выглядит как обычная строка текста; подчёркивание появляется при наведении и фокусе.
Класс .vinput--inline, размеры vinput--inline-body / --title /
--stat.
В контексте
Заказ ·
Сумма · срок
Заголовок формы
Бокс в одну линию с .vinput — класс .vselect, размеры vselect--sm /
vselect--lg.
Триггер как текст с шевроном; список — компактный дропдаун. Класс .vinline-select.
Для простых случаев — нативный <select class="vinput vinput--inline">.
В контексте
Ответственный: · статус
Комбобокс с подсказкой раскладки (ghbdtn → привет), подсветкой совпадений и клавиатурной навигацией.
В React — компонент HybridSearchInput.
Вариант Amo (тёмная зона)
Класс .vtabs — pill (vtabs--pill) и underline (vtabs--line).
Индикатор анимируется при переключении.
Pill
Underline
data-vtooltip — над элементом.
data-vtooltip-cursor — «живой» тултип с инерцией, следует за курсором.
Статичные
Живые — наведите и водите курсором
Подсказка сглаживается и слегка поворачивается при движении мыши
Skeleton, пульсирующие статусы, switch, progress, toast-колода и счётчики с пружинной анимацией.
Кнопки с классом vmagnetic слегка тянутся к курсору.
У части секций — живой border: класс vborder + data-vborder + vui-glow.js.
Статусы
Switch
Progress
Счётчик
0 ₽
Анимация при появлении в зоне видимости
Skeleton → контент
Заказ #1042 · ремонт холодильника
Toast-колода
Несколько уведомлений схлопываются в стопку — клик раскрывает. Красная — исчезает через 5 с.
Тёмная шапка карточки в SideDrawer на токенах
(--color-accent-bg, --color-text-on-accent).
Модификатор .vui-drawer-hero--as-header — flush к верху панели.
Legacy-алиас в apps: .ii-hero*.
Поставка
Поставщик, склад и оплата — здесь.
Товар
Название, цены и статус — здесь.
Сотрудник
Аватар, ФИО и статус — здесь.
Полоса метрик как в каталоге SMP. При наведении на ячейку — живой border (data-vstats-glow), цвет от тона значения.
Сегодня
Смена #12
48 200 ₽
Иванов И.П. · июнь 2026
14
Отработано смен
Цель 20 смен · 14 выполнено
Количество и сумма за период
47
Количество
128 400 ₽
Сумма продаж
3 из 8 в команде
9 171 ₽
Ср. чек
2 из 8 в команде
Количество и сумма за период
23
Количество
1 из 8 в команде
312 500 ₽
Сумма ремонтов
22 321 ₽
Ср. чек
4 из 8 в команде
средний чек на смену · количество и сумма
Средний чек на смену
Средний чек на смену
Command palette (⌘K), перетаскивание карточек и лента событий с фильтрами.
Классы .vpalette, .vdnd, .vfeed.
Command palette
Fuzzy-поиск, ↑↓ навигация, Enter — выполнить. Попробуйте «заказ», «клиент», «отчёт».
Drag & drop заказы
Перетащите карточки — ghost с инерцией и слот-вставка.
Activity feed
Таймлайн, фильтры, непрочитанные и живое «N мин назад».
Заказ #1042 · 4 500 ₽ безнал
Иванов И.П. · ETA 18 мин
#1031 · компрессор Samsung
<link rel="stylesheet" href="https://ui.virstak.ru/virstak-fonts.css" />
<link rel="stylesheet" href="https://ui.virstak.ru/virstak-tokens.css" />
<link rel="stylesheet" href="https://ui.virstak.ru/vui-components.css" />