Компоненты · Экраны

Первый запускOnboarding

Знакомство до трёх шагов, каждый в 1100 × 700

npx shadcn@latest add @umbra/onboarding

Каркас первого запуска: фон окна, сверху точки шага, ниже плитка до 600 px с содержимым шага. Шаг держит одну задачу: обложка (Showcase 8:3), заголовок, подсказка, одно главное действие. Логику шагов (что проверять, когда идти дальше) задаёт продукт, компонент отвечает за вид и смену

Когда брать

  • Первый запуск: знакомство с живым показом, доступ (микрофон), «Почти готово» с настоящим прогрессом
  • Короткий мастер до трёх шагов, где каждый шаг это одно решение человека

Когда не брать

  • Настройки и длинные формы: Page
  • Одно сообщение: NoticeCard
  • Экран обработки после действия: плитка по центру с Showcase 2:1 и фактами

Нажмите «Записать», остальное сделает ShadeNotes

Можно

  • Загрузку и проверки запускать уже на первом шаге, пока человек читает
  • Неуверенный статус честно: «Проверим при первой записи», а не «Доступ есть»
  • «ShadeNotes» и предлоги не отрывать: неразрывный пробел в строках

Нельзя

  • Больше трёх шагов, прокрутку внутри шага, шаг, который не помещается в 1100 × 700
  • Выдуманный прогресс и задержку ради анимации: показывается только настоящий статус
  • Неактивную главную кнопку блёклым акцентом: она нейтрально-серая