События

Расписание по дням цветными капсулами

Расписание фестиваля: дни — большие цветные капсулы (активная залита своим цветом), фильтр направлений маленькими капсулами, список слотов: время крупно, цветная полоска дня, заголовок, сцена, направление и плашка «Бесплатно» или «18+». Смена дня перерисовывает список с каскадом.

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

  • days: ключи, подписи, даты, цвета; slots: день, время, заголовок, сцена, направление и цвет, плашка, ссылка
  • eyebrow, title, allLabel, emptyText
  • accent и background, tone

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

Превью

1440pxТема страницы

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

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

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

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

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

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

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

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

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

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

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

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

Один файл, ноль зависимостей, «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
Исходник компонента

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

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