VibeUI
РусEng
Войти

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

Меню с разделами и фото у курсора

Меню ресторана: разделы табами, блюда списком с точечным лидером до цены, состав и метки «острое», «вег», «шеф». Под активным табом плашка, которая переезжает к выбранному; смена раздела — блюда въезжают каскадом; по наведению на блюдо у курсора всплывает его фото.

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

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

  • sections: разделы, заметки, блюда с текстом, ценой, метками и фото
  • eyebrow, title, lede, fullLabel, fullHref
  • accent и background, tone

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

Превью

1440pxТема страницы
Меню с разделами и фото у курсора — Меню ресторана: разделы табами, блюда списком с точечным лидером до цены, состав и метки «острое», «вег», «шеф». Под активным табом плашка, которая переезжает к выбранному; смена раздела — блюда въезжают каскадом; по наведению на блюдо у курсора всплывает его фото.

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

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

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

https://vibeui.ru/c/restaurant-003?theme=dark

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

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

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

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

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

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

<Restaurant003
  title="Что готовим этой осенью"
  sections={[
    { title: "Закуски", note: "Хлеб печём сами", dishes: [
      { name: "Тартар из оленины", text: "можжевельник, желток, ржаные чипсы", price: "890 ₽", tags: ["шеф"], image: "/photos/dish-02.webp" },
    ] },
  ]}
  fullLabel="Полное меню в PDF"
  fullHref="/menu.pdf"
/>

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

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Что готовим этой осенью
Ссылка
fullLabel · по умолчанию: Полное меню в PDF
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

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

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

Как установить компонент «Меню с разделами и фото у курсора» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Меню с разделами и фото у курсора»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Меню с разделами и фото у курсора»?
Можно менять: sections: разделы, заметки, блюда с текстом, ценой, метками и фото; eyebrow, title, lede, fullLabel, fullHref; accent и background, tone. Сохранить как есть: импорты из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; точечный лидер между названием и ценой — классическая ресторанная строка; плашку, переезжающую под активный таб, и каскадное появление блюд при смене раздела.
Компонент «Меню с разделами и фото у курсора» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/restaurant-003.json

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

Технические заметки

Составной блок: импортирует из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, «use client» ради табов и фото. Табы role=tab с aria-selected; под активным — плашка (li data-part=pill), её позиция и размер меряются в useLayoutEffect по offsetLeft/offsetWidth кнопки и пишутся прямо в style плашки (без состояния), переезд transform/width за .5s, ResizeObserver перемеряет на ресайз. Список пересобирается с новым key на смену раздела — @keyframes с задержкой --n×60ms. Строка блюда: название серифом, лидер — flex:1 с пунктирной нижней границей, цена nowrap. Метки получают data-kind по началу слова (вег/hot/шеф) и свой цвет. Фото — один <img> position:fixed, координаты курсора пишутся в CSS-переменные --x/--y на onMouseMove без ререндера; на устройствах без hover скрыт. Сетка блюд в две колонки от 48rem (container query). Палитра --vibeui-restaurant-003-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Playfair Display и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • restaurant
  • cafe
  • bar
  • food
  • menu
  • dining
  • tabs
  • dishes
  • price
  • leader
  • composite
Исходник компонента

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

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