VibeUI
РусEng
Войти

События

События ресторана лентой

События ресторана: лента строк с днём недели крупным серифом акцентным свечением слева, периодичностью капителью, названием, временем, текстом, ценой и ссылкой. По наведению строка подсвечивается и справа выезжает фото.

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

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

  • events: день, периодичность, время, название, текст, цена, ссылка, фото
  • eyebrow, title, lede
  • accent и background, tone

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

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

Превью

1440pxТема страницы
События ресторана лентой — События ресторана: лента строк с днём недели крупным серифом акцентным свечением слева, периодичностью капителью, названием, временем, текстом, ценой и ссылкой. По наведению строка подсвечивается и справа выезжает фото.

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

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

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

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

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

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

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

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

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

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

<Event004
  title="Что бывает по вечерам"
  events={[
    { day: "ср", when: "каждую неделю", time: "18:00–23:00", title: "Устричные среды", text: "Устрицы по цене закупки, к ним — бокал мюскаде.", price: "650 ₽ / 6 шт.", actionLabel: "Занять стол", actionHref: "#book", image: "/photos/event.webp" },
  ]}
/>

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

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Что бывает по вечерам
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

Ещё в разделе «События»

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

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

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

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

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

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

Составной блок: импортирует button-077 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, серверный компонент. <ul> с границами между строками; строка — grid 4.5rem/1fr, от 56rem (container query) 7rem/1fr/11rem с фото в третьей колонке. По hover подложка строки (::before с inset 0 −1rem) проявляется opacity и лёгким scale без изменения раскладки, фото opacity 0→1 с лёгким scale. День — серифом в нижнем регистре, время — tabular-nums. Палитра --vibeui-event-004-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; шрифты Playfair Display и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • restaurant
  • cafe
  • bar
  • food
  • menu
  • dining
  • events
  • schedule
  • agenda
  • jazz
  • composite
Исходник компонента

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

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