События
События фонда билетами с перфорацией и шкалой «нужны руки»
Список событий как билеты: слева корешок с датой антиквой и днём недели, между корешком и телом перфорация — пунктир и полукруглые вырезы маской; справа название, описание, место, время, рукописная пометка на полях и шкала «записалось 7 из 12». По наведению билет приподнимается, корешок заливается акцентом. От 64rem — две колонки.
React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.
Что можно поменять
- eyebrow, title, lede
- events: day, month, weekday, title, text, place, time, note
- events: need, joined, actionLabel, actionHref
Собран из
Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/event-025?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Как использовать
<Event025
title="Ближайшие выезды и встречи"
events={[{ day: "27", month: "сен", weekday: "суббота", title: "Осенний развоз", place: "Тверь", time: "9:00 – 18:00", need: 12, joined: 7, note: "нужны водители", actionLabel: "Поехать" }]}
/>Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».
Настройки
- Заголовок
title· по умолчанию: Ближайшие выезды и встречи- Подзаголовок
lede· по умолчанию: Каждую субботу мы куда-то едем. Билет бесплатный, дресс-код — удобная обувь.- Тема
tone· по умолчанию: auto- Акцент
accent· по умолчанию: цвет темы- Текст
ink· по умолчанию: цвет темы- Фон
background· по умолчанию: цвет темы
Используется в сценариях
- Благотворительный фондСобытия
Ещё в разделе «События»
Частые вопросы
- Как установить компонент «События фонда билетами с перфорацией и шкалой «нужны руки»» через Cursor или Claude Code?
- Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
- Какие зависимости у компонента «События фонда билетами с перфорацией и шкалой «нужны руки»»?
- Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016.
- Что можно поменять в компоненте «События фонда билетами с перфорацией и шкалой «нужны руки»»?
- Можно менять: eyebrow, title, lede; events: day, month, weekday, title, text, place, time, note; events: need, joined, actionLabel, actionHref. Сохранить как есть: импорты button-016 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; перфорация — mask из двух radial-gradient по границе корешка (6rem, от 48rem — 8rem), внутри корешка dashed border-right; шкала — width по joined/need через --w, при need 0 не рендерится; «мест нет», когда joined ≥ need.
- Компонент «События фонда билетами с перфорацией и шкалой «нужны руки»» бесплатный?
- Превью открыто всем, исходник доступен по подписке PRO.
Для разработчика
npx shadcn@latest add https://vibeui.ru/r/pro/event-025.jsonКоманде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки
Технические заметки
Составной блок: импортирует button-016 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.
Теги
- events
- charity
- tickets
- schedule
- volunteers
- calendar
- perforation
- handwritten
- nonprofit
- composite
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…