VibeUI
РусEng
Войти

Вопросы и ответы

Вопросы в две колонки с цветными маркерами

Вопросы фестиваля: две колонки раскрывающихся вопросов, у каждого цветной кружок-маркер, открытый вопрос заливается светло-серым, кружок растёт, плюс поворачивается в крестик. Открыт один за раз. Справа сверху «Не нашли ответ?» и акцентная капсула.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

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

  • items: вопросы, ответы, цвета
  • eyebrow, title, askText, askLabel, askHref
  • accent и background, tone

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

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

Превью

1440pxТема страницы
Вопросы в две колонки с цветными маркерами — Вопросы фестиваля: две колонки раскрывающихся вопросов, у каждого цветной кружок-маркер, открытый вопрос заливается светло-серым, кружок растёт, плюс поворачивается в крестик. Открыт один за раз. Справа сверху «Не нашли ответ?» и акцентная капсула.

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

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

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

https://vibeui.ru/c/faq-018?theme=dark

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

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

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

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

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

Как использовать

<Faq018
  title="Что спрашивают перед фестивалем"
  items={[
    { question: "Можно ли с детьми?", answer: "Да, до 7 лет бесплатно.", color: "#98f5af" },
    { question: "Что бесплатно?", answer: "Фуд-корт, маркет и лекторий.", color: "#c2df37" },
  ]}
  askLabel="Напишите в Telegram"
  askHref="https://t.me/festival"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Тема
tone · по умолчанию: auto
Заголовок
title · по умолчанию: Что спрашивают перед фестивалем
Первый открыт
openFirst · по умолчанию: выключено
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Вопросы и ответы»

Частые вопросы

Как установить компонент «Вопросы в две колонки с цветными маркерами» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Вопросы в две колонки с цветными маркерами»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: accordion-018.
Что можно поменять в компоненте «Вопросы в две колонки с цветными маркерами»?
Можно менять: items: вопросы, ответы, цвета; eyebrow, title, askText, askLabel, askHref; accent и background, tone. Сохранить как есть: импорты accordion-018 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; цветные кружки-маркеры у вопросов — цвет в данных, кружок растёт при открытии; две колонки с независимой высотой (align-items:start).
Компонент «Вопросы в две колонки с цветными маркерами» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/faq-018.json

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

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

Составной блок: импортирует accordion-018 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Один файл, ноль зависимостей, серверный компонент. <details name={useId()}> — открыт один. summary сеткой 1.5rem/1fr/1.5rem: кружок item.color в --dot (scale 1.6 при [open]), текст, плюс из двух чёрточек (rotate 45deg при [open]). Ответ — <p> с @keyframes fade. От 56rem (container query) две колонки с align-items:start, чтобы открытый вопрос не растягивал соседа. Палитра --vibeui-faq-018-* нейтральная: чернила и бумага через light-dark(), цвета сайта передаются пропсами accent, ink и background; цвета капсул задаются в данных (color и ink на каждый элемент), поэтому одна секция может нести все двенадцать цветов фестиваля. Шрифты Inter Tight и Inter подключаются <link precedence> с Google Fonts, с fallback на системные. tone фиксирует схему, accent, ink и background переопределяют цвета.

Теги

  • festival
  • event
  • colorful
  • pills
  • landing
  • faq
  • questions
  • accordion
  • columns
  • composite
Исходник компонента

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

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