VibeUI
РусEng
Войти

Контакты

Check-in: дорожная RSVP-анкета в пять шагов

RSVP свадьбы-путешествия как регистрация на рейс: пять шагов — летите ли, даты прилёта и вылета с номером рейса, отель (забронировать за вас?), меню и аллергии, песня для пляжа. Справа сводка в виде посадочного талона, заполняется по ходу; финал — штамп «CHECKED IN». Имя гостя — из ?guest= в адресе.

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

  • eyebrow, title, greeting ({name}), lede ({deadline}), deadline, guest, stepLabels, from, to
  • menu (value/label), summaryTitle, submitLabel, thanksTitle, thanksText, stampLabel, action
  • accent и background, tone

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

Превью

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

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

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

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

https://vibeui.ru/c/contact-019?theme=dark

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

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

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

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

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

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

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

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

Один файл, ноль зависимостей, «use client». Состояние — объект ответов и номер шага; шаги по одному с fade-in, «Дальше» на первом заблокировано без имени и «лечу/не смогу». Выборы — кнопки с aria-pressed. Имя из адреса — useSyncExternalStore (на сервере пусто), greeting с {name} заменяет заголовок; lede принимает {deadline}. Сводка — <aside data-part=pass> с тёмной шапкой «SVO → HAV», <dl> в две колонки, штрих-кодом и штампом, который data-sent печатает keyframes с уменьшением. Отправка: без action — preventDefault и экран «вы на борту»; с action — POST с hidden-полями guest и answers (JSON). От 56rem сетка 1.4fr/.7fr, талон sticky. Палитра --vibeui-contact-019-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Oswald, Lobster и Manrope подключаются <link precedence> с Google Fonts, с fallback на системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.

Теги

  • wedding
  • travel
  • rsvp
  • check-in
  • form
  • multi-step
  • boarding pass
  • flight
  • hotel
  • menu
  • song request
  • cuba
  • retro
Исходник компонента

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

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