VibeUI
РусEng
Войти

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

Меню доставки: карточки блюд с подсветкой за курсором, полётом в корзину и полосой «до бесплатной доставки»

Меню доставки с корзиной: фильтр-чипы по группам, карточки блюд с фото на всю ширину — рамка подсвечивается за курсором, фото приближается при наведении, бейджи «хит/острое» на стекле. Кнопка «+ В корзину» раскрывается в степпер «− 2 +», а копия фото улетает в корзину. Корзина — закреплённая полоса снизу, выезжает при первом добавлении: сумма, число блюд, прогресс «до бесплатной доставки осталось …» и кнопка оформления. Шлёт vibeui-cart:state, принимает vibeui-cart:add и vibeui-cart:zone, по оформлению шлёт vibeui-cart:checkout.

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

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

  • eyebrow, title, lede, allLabel, addLabel, checkoutLabel
  • dishes: id, name, text, price, meta, kind, image, badge
  • freeFrom, deliveryFee, currency

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

Превью

1440pxТема страницы
Меню доставки: карточки блюд с подсветкой за курсором, полётом в корзину и полосой «до бесплатной доставки» — Меню доставки с корзиной: фильтр-чипы по группам, карточки блюд с фото на всю ширину — рамка подсвечивается за курсором, фото приближается при наведении, бейджи «хит/острое» на стекле. Кнопка «+ В корзину» раскрывается в степпер «− 2 +», а копия фото улетает в корзину. Корзина — закреплённая полоса снизу, выезжает при первом добавлении: сумма, число блюд, прогресс «до бесплатной доставки осталось …» и кнопка оформления. Шлёт vibeui-cart:state, принимает vibeui-cart:add и vibeui-cart:zone, по оформлению шлёт vibeui-cart:checkout.

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

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

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

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

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

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

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

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

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

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

<Delivery001
  title="Что готовим прямо сейчас"
  freeFrom={1500}
  dishes={[
    { id: "smash", name: "Смэш-бургер", price: 590, kind: "Бургеры", image: "/photos/smash.webp", badge: "хит" },
    { id: "tomyum", name: "Том-ям", price: 490, kind: "Азия", image: "/photos/tom-yum.webp" },
  ]}
/>

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

Настройки

Заголовок
title · по умолчанию: Что готовим прямо сейчас
Бесплатно от
freeFrom · по умолчанию: 1500
Стоимость доставки
deliveryFee · по умолчанию: 149
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

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

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

Как установить компонент «Меню доставки: карточки блюд с подсветкой за курсором, полётом в корзину и полосой «до бесплатной доставки»» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Меню доставки: карточки блюд с подсветкой за курсором, полётом в корзину и полосой «до бесплатной доставки»»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Меню доставки: карточки блюд с подсветкой за курсором, полётом в корзину и полосой «до бесплатной доставки»»?
Можно менять: eyebrow, title, lede, allLabel, addLabel, checkoutLabel; dishes: id, name, text, price, meta, kind, image, badge; freeFrom, deliveryFee, currency. Сохранить как есть: count и total считаются в useMemo из qty и extras; useEffect шлёт vibeui-cart:state при их изменении; подсветка рамки — ::before с маской content-box/xor и radial-gradient в точке --vibeui-delivery-001-x/y, которую ставит onPointerMove; полёт в корзину — клон img с element.animate от фото до полосы bar, по finish полоса вздрагивает; при reduced-motion полёта нет.
Компонент «Меню доставки: карточки блюд с подсветкой за курсором, полётом в корзину и полосой «до бесплатной доставки»» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

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

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

Теги

  • delivery
  • menu
  • cart
  • food
  • dishes
  • stepper
  • progress
  • free-delivery
  • fixed-bar
  • filter
  • ecommerce
  • event
  • spotlight
  • fly to cart
  • hover
Исходник компонента

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

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