События
Дресс-код палитрой с копированием цвета
Дресс-код для гостей палитрой: пять крупных кругов цвета внахлёст, как мазки на пробнике; клик копирует HEX, круг подпрыгивает и подпись меняется на «скопировано». Справа от палитры — «чего лучше избежать» на акцентной плашке, ниже два образа: «ей» и «ему».
Что можно поменять
- eyebrow, title, lede, swatches (name, hex), hint, copiedLabel
- looks (who, title, text), avoidTitle, avoidItems
- accent и background, tone
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/event-009?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Один файл, ноль зависимостей, «use client» ради копирования (navigator.clipboard, состояние на 1.6 с). Круги — кнопки с --vibeui-event-009-chip из swatch.hex, диаметр clamp(4.5rem,14cqi,7.5rem), нахлёст через margin-right и кольцо box-shadow цвета фона; hover поднимает, data-copied запускает keyframes подскока. Подпись — имя и HEX моноширинными цифрами. От 56rem палитра и «избегать» стоят в два столбца (1.5fr/.8fr), образы — в две колонки под ними. Палитра --vibeui-event-009-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; тёмная тема — по .dark/[data-theme] или tone. Шрифты Cormorant Garamond и Manrope подключаются <link precedence> с Google Fonts, с fallback на Georgia и системные. accent и background переопределяют цвета, prefers-reduced-motion гасит анимации.
Теги
- wedding
- dress code
- palette
- colors
- swatches
- copy
- hex
- outfit
- guests
- serif
- cream
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…