VibeUI
РусEng
Войти

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

Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету

Конструктор боула для доставки еды: слева группы ингредиентов плитками с настоящими фото без фона — основа и соус один из, белки и добавки сколько угодно, выбранная плитка подсвечена галочкой. Справа миска сверху: основа ложится кругом внутрь, белки и добавки падают в неё с отскоком и раскладываются по кругу, соус стоит соусницей у края. Под миской калории, вес и цена считаются на лету, кнопка «в корзину» шлёт vibeui-cart:add.

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

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

  • eyebrow, title, lede, addLabel, addedLabel
  • groups: id, title, mode (single | multi), options: id, name, price, kcal, color (заглушка), image (фото ингредиента без фона)
  • bowlImage (пустая миска сверху без фона), basePrice, currency

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

Превью

1440pxТема страницы
Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету — Конструктор боула для доставки еды: слева группы ингредиентов плитками с настоящими фото без фона — основа и соус один из, белки и добавки сколько угодно, выбранная плитка подсвечена галочкой. Справа миска сверху: основа ложится кругом внутрь, белки и добавки падают в неё с отскоком и раскладываются по кругу, соус стоит соусницей у края. Под миской калории, вес и цена считаются на лету, кнопка «в корзину» шлёт vibeui-cart:add.

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

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

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

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

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

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

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

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

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

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

<Delivery002
  title="Собери свой боул"
  basePrice={290}
  bowlImage="/photos/bowl-empty.webp"
  groups={[
    { id: "base", title: "Основа", mode: "single", options: [{ id: "rice", name: "Рис", price: 0, kcal: 210, color: "#f4efe2", image: "/photos/base-rice.webp" }] },
    { id: "protein", title: "Белок", mode: "multi", options: [{ id: "salmon", name: "Лосось", price: 220, kcal: 180, color: "#ff8a6b", image: "/photos/protein-salmon.webp" }] },
  ]}
/>

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

Настройки

Заголовок
title · по умолчанию: Собери свой боул
Цена миски
basePrice · по умолчанию: 290
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

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

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

Как установить компонент «Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету»?
Можно менять: eyebrow, title, lede, addLabel, addedLabel; groups: id, title, mode (single | multi), options: id, name, price, kcal, color (заглушка), image (фото ингредиента без фона); bowlImage (пустая миска сверху без фона), basePrice, currency. Сохранить как есть: picked — массив id в порядке выбора; single-группы заменяют свой вариант, multi — переключают; ингредиенты — фото сверху без фона одного ракурса и света; основа — круг inset 14% внутри миски, белки 34%, добавки 25% ширины миски; места в миске считает spot(i, n) по кругу, left/top с transition — при новом ингредиенте остальные плавно сдвигаются; появление — keyframes drop на img.
Компонент «Конструктор боула: ингредиенты с фото падают в миску, калории и цена на лету» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

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

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

Теги

  • delivery
  • builder
  • configurator
  • bowl
  • poke
  • ingredients
  • calories
  • calculator
  • food
  • interactive
  • event
  • photo tiles
  • drop animation
Исходник компонента

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

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