Каталог компонентов

UI primitives, токены и состояния. Используется как справочник при разработке модулей в слайсах 3–10.

Foundations

Цвета, типографика, spacing, радиусы, тени

Surfaces

surface-0

#020617

surface-1

#0F172A

surface-2

#1E293B

surface-3

#334155

Severity

info

#60A5FA

warn

#FBBF24

danger

#F87171

success

#34D399

Typography

Heading 3xl bold

Heading xl semibold

Body base — Lorem ipsum dolor sit amet

Body sm muted — secondary info

Body xs subtle — captions, hints

font-mono — 9F3A1B2C, 1 234 567,89 ₽

Spacing scale

1 (4px)

2 (8px)

3 (12px)

4 (16px)

6 (24px)

8 (32px)

Radii

rounded-md

rounded-lg

rounded-xl

rounded-full

Shadows

shadow-card

shadow-dropdown

shadow-modal

Buttons

Primary, Secondary, Ghost, Danger + состояния

Создать клиента Secondary Ghost Удалить

Disabled Обработка...

Inputs & Forms

Text, search, select, checkbox, switch

Email

Используется как login

Поиск

Статус ВсеNEWKYC_PENDINGVERIFIED_L1

Комментарий

KYC пройден L1 L2

Chips & Badges

Status chips, SLA chips, KbdShortcut — рендерятся через UpOps.* renderers

Client status

Transaction status

Alert severity

Operational status

SLA chips (через UpOps.slaChip)

Keyboard shortcuts (UpOps.KbdShortcut)

Cards

KPI / Info / Alert

Активные транзакции

247

+12%

Info card

Краткое уведомление операторам с действием рядом.

SLA breach

TX-9F3A1B — просрочка 4м

Эскалировать →

Tables

Dense таблица + empty state

UUID	Клиент	Сумма	Статус
9F3A1B2C…	Иванов А.С.	120 000,00 ₽	PAYMENT_RECEIVED
B7E4F8A1…	Петрова М.В.	85 500,00 ₽	COMPLETED
C2D5E9F4…	Сидоров К.И.	412 800,00 ₽	CREATED

Нет данных

Создайте первую запись или измените фильтры.

Добавить

Overlays

Modal, Drawer, Toast, Dropdown, Confirm, Wizard — через UpOps.*

Modal (sm) Modal (md) Modal (lg) Drawer (right) Drawer (left) Toast info Toast success Toast warn Toast danger Dropdown Confirm dialog Wizard (3 шага)

Layout & States

Skeleton, empty, error, loading

Skeleton rows

Загрузка...

Ничего не найдено

Попробуйте другие фильтры

Ошибка загрузки

Не удалось получить данные с сервера

Повторить

Animations

pulse-critical, count-up, shimmer

pulse-critical

0 Запуск →

Glass utility

.glass — лёгкий glassmorphism для overlay-блоков

Glass card

Поверх градиента — лёгкий backdrop-blur эффект