VibeUI
РусEng
Войти

Отраслевые секции

Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер

Демонстрация трекера доставки: слева шаги с иконками — принят, готовим, курьер выехал, у двери; текущий подсвечен и заполняет свою полоску, пройденные отмечены галочкой. Справа телефон с приложением: кольцо прогресса с минутами до приезда, тёмная карта кварталов с рекой и парком, маршрут по улицам — курьер едет по нему через CSS offset-path, пройденный путь светится; снизу карточка курьера, в конце его сообщение. Стартует сам при появлении на экране, по кнопке и по vibeui-cart:checkout.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • eyebrow, title, lede, playLabel, replayLabel, courierName
  • steps: title, text, time, after (мс), progress (0–100)
  • цвет курьера и маршрута — через accent

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер — Демонстрация трекера доставки: слева шаги с иконками — принят, готовим, курьер выехал, у двери; текущий подсвечен и заполняет свою полоску, пройденные отмечены галочкой. Справа телефон с приложением: кольцо прогресса с минутами до приезда, тёмная карта кварталов с рекой и парком, маршрут по улицам — курьер едет по нему через CSS offset-path, пройденный путь светится; снизу карточка курьера, в конце его сообщение. Стартует сам при появлении на экране, по кнопке и по vibeui-cart:checkout.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/delivery-004?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Delivery004
  title="Видно каждую минуту"
  courierName="Артём"
  steps={[
    { title: "Заказ принят", text: "Повар видит заказ.", time: "12:41", after: 300, progress: 0 },
    { title: "Готовим", text: "Ещё 9 минут.", time: "12:43", after: 1800, progress: 0 },
    { title: "Курьер выехал", text: "2,3 км до вас.", time: "12:56", after: 3600, progress: 100 },
    { title: "У двери", text: "Приятного аппетита.", time: "13:07", after: 6600, progress: 100 },
  ]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
title · по умолчанию: Видно каждую минуту
Имя курьера
courierName · по умолчанию: Артём
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Отраслевые секции»

Частые вопросы

Как установить компонент «Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер»?
Можно менять: eyebrow, title, lede, playLabel, replayLabel, courierName; steps: title, text, time, after (мс), progress (0–100); цвет курьера и маршрута — через accent. Сохранить как есть: run — счётчик запусков; useEffect на run ставит setTimeout на каждый steps[i].after и вызывает setStep(i), таймеры чистятся; первый запуск — IntersectionObserver с threshold 0.45, один раз; повтор — кнопкой и по vibeui-cart:checkout; курьер — g с offset-path:path(ROUTE), offset-distance из --vibeui-delivery-004-d с transition 2.8 с; trail — тот же path с pathLength 1 и stroke-dashoffset.
Компонент «Трекер заказа: шаги с живым прогрессом и телефон с картой, по которой едет курьер» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/delivery-004.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Теги

  • delivery
  • tracker
  • order-status
  • timeline
  • courier
  • map
  • offset-path
  • motion-path
  • animation
  • demo
  • event
  • phone mockup
  • progress ring
  • autoplay
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…