События
Расписание по дням цветными капсулами
Расписание фестиваля: дни — большие цветные капсулы (активная залита своим цветом), фильтр направлений маленькими капсулами, список слотов: время крупно, цветная полоска дня, заголовок, сцена, направление и плашка «Бесплатно» или «18+». Смена дня перерисовывает список с каскадом.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- days: ключи, подписи, даты, цвета; slots: день, время, заголовок, сцена, направление и цвет, плашка, ссылка
- eyebrow, title, allLabel, emptyText
- accent и background, tone
Собран из
Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/event-006?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Event006
days={[
{ key: "fri", label: "Пятница", date: "22 авг", color: "#ffa5b1" },
{ key: "sat", label: "Суббота", date: "23 авг", color: "#c2df37" },
]}
slots={[
{ day: "fri", time: "20:00", title: "Оркестр на воде", stage: "Главная сцена", tag: "#Музыка", tagColor: "#ffe2d6" },
{ day: "sat", time: "08:00", title: "Йога", stage: "Набережная", tag: "#Утро", tagColor: "#98f5af", note: "Бесплатно" },
]}
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Тема
tone· по умолчанию: auto- Заголовок
title· по умолчанию: По дням и площадкам- Акцент
accent· по умолчанию: цвет темы- Фон
background· по умолчанию: цвет темы
Используется в сценариях
- Городской фестивальРасписание
Ещё в разделе «События»
Частые вопросы
- Как установить компонент «Расписание по дням цветными капсулами» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «Расписание по дням цветными капсулами»?
- Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-119.
- Что можно поменять в компоненте «Расписание по дням цветными капсулами»?
- Можно менять: days: ключи, подписи, даты, цвета; slots: день, время, заголовок, сцена, направление и цвет, плашка, ссылка; eyebrow, title, allLabel, emptyText; accent и background, tone. Сохранить как есть: импорты card-119 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; дни как цветные капсулы с заливкой активного своим цветом — не серые табы; фильтр направлений, собранный из данных, и перерисовку списка с каскадом.
- Компонент «Расписание по дням цветными капсулами» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/event-006.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Составной блок: импортирует card-119 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, «use client» ради дня и фильтра. Дни — <ul role=tablist> с кнопками role=tab и aria-selected; day.color в --day, ink в --day-ink, активная — заливка, остальные — контур 2px. Фильтры собираются из slots автоматически (уникальные tag), кнопки с aria-pressed. Список — <ol key={day+tag}>, пересоздаётся и въезжает @keyframes с задержкой --n×40ms; полоска у времени — ::before цвета дня; от 56rem строка в три колонки 6rem/1fr/auto и подсветка строки градиентом цвета дня по наведению. Пустой фильтр — плашка emptyText. Палитра --vibeui-event-006-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; цвета капсул задаются в данных (color и ink на каждый элемент), поэтому одна секция может нести все двенадцать цветов фестиваля. Шрифты Inter Tight и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.
Теги
- festival
- event
- colorful
- pills
- landing
- schedule
- timetable
- tabs
- filter
- days
- composite
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…