Интерфейс
Health check сервисов
Список сервисов с цветными индикаторами статуса: кольцо-проверка бежит по строкам сверху вниз бесконечным циклом, у рабочих сервисов поверх волны горит собственный мягкий зелёный пульс.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- список сервисов: имя, статус (ok/degraded/down) и время отклика или причину простоя
- текст подписи статуса через опциональное поле status в объекте сервиса
- акцентный цвет через проп accent под свой бренд
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/status-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Status001 title="Статус сервисов" badge="Live" services={[{ name: "API Gateway", tone: "ok", meta: "42 ms" }, { name: "Search Index", tone: "down", meta: "Нет ответа" }]} />Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Свечение
gradient· по умолчанию: включено- Изометрия
isometric· по умолчанию: выключено- Акцент
accent· по умолчанию: цвет темы
Ещё в разделе «Интерфейс»
Частые вопросы
- Как установить компонент «Health check сервисов» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Health check сервисов»?
- Никаких npm-пакетов, кроме React и Tailwind CSS.
- Что можно поменять в компоненте «Health check сервисов»?
- Можно менять: список сервисов: имя, статус (ok/degraded/down) и время отклика или причину простоя; текст подписи статуса через опциональное поле status в объекте сервиса; акцентный цвет через проп accent под свой бренд. Сохранить как есть: локальную палитру --vibeui-status-001-* — не подменяйте её токенами вашей темы; бегущее кольцо-проверку на индикаторах и его бесконечный цикл сверху вниз; мягкий постоянный пульс у сервисов со статусом ok, отдельный от волны проверки.
- Компонент «Health check сервисов» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/status-001.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Компонент самодостаточен: один файл, ноль зависимостей, палитра в локальных --vibeui-status-001-* переменных. Тему берёт из окружения через light-dark() плюс строку для класса .dark, поэтому в тёмном проекте не остаётся светлым. Кольцо-проверка обегает индикаторы сверху вниз бесконечным циклом — задержка старта считается от позиции строки в списке, поэтому волна выглядит непрерывной вне зависимости от числа сервисов. Состояние сервиса задаётся data-tone (ok/degraded/down), рабочие сервисы дополнительно получают мягкий постоянный пульс — сигнал стабильности не зависит от прохода волны. Всё гаснет при prefers-reduced-motion.
Теги
- status
- health-check
- monitoring
- uptime
- indicator
- animated
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…