VibeUI
РусEng
Войти

Аккордеон

Аккордеон-колонки

Карточки вопросов раскладываются в газетные колонки: порядок вертикальный — читают левую колонку сверху вниз, потом правую, и нумерация не путается. Карточка не рвётся между колонками. На нативных details, разделы независимы, номера «01, 02…» перед вопросом, стрелка справа поворачивается при раскрытии.

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

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

  • items — вопросы и ответы
  • numbered — номера перед вопросами
  • columns — число колонок на широкой раскладке: 1, 2 или 3

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

Превью

1440pxТема страницы
Аккордеон-колонки — Карточки вопросов раскладываются в газетные колонки: порядок вертикальный — читают левую колонку сверху вниз, потом правую, и нумерация не путается. Карточка не рвётся между колонками. На нативных details, разделы независимы, номера «01, 02…» перед вопросом, стрелка справа поворачивается при раскрытии.

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

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

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

https://vibeui.ru/c/accordion-015?theme=dark

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

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

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

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

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

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

<Accordion015
  columns={2}
  items={[
    { question: "Как быстро подключают тариф?", answer: "Сразу после оплаты." },
    { question: "Есть ли ограничение по числу сотрудников?", answer: "На стартовом тарифе — пять." },
  ]}
/>

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

Настройки

Номера
numbered · по умолчанию: включено
Колонки
columns · по умолчанию: 2
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в блоках

Похожие по стилю и содержимому

Варианты из той же категории с общими тегами или похожей формой контента.

  • Серифный аккордеон с номерами

    Вопрос набран антиквой, номер «01, 02…» и ответ — рубленым шрифтом; плюс из двух полос поворачивается в крест. Разделы взаимно исключают друг друга через атрибут name у details, без JS. Для сайтов с редакционной, «книжной» типографикой.

  • Аккордеон-плитки с кромкой

    Разделы — мягкие плитки с тонкой левой кромкой: у открытого она загорается акцентом, а круглый плюс справа заливается акцентом и поворачивается в крест. Ответ въезжает с лёгким сдвигом. Один открытый раздел через name у details, без JS.

  • Неоновый аккордеон

    Тёмный аккордеон: у открытого раздела вдоль левого края загорается неоновая линия с мягким свечением, моноширинный номер подсвечивается тем же цветом, рамка плитки светится. Палитра фиксированно тёмная — неон на светлом не светится. Один открытый раздел через name у details.

Ещё в разделе «Аккордеон»

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

Как установить компонент «Аккордеон-колонки» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Аккордеон-колонки»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Аккордеон-колонки»?
Можно менять: items — вопросы и ответы; numbered — номера перед вопросами; columns — число колонок на широкой раскладке: 1, 2 или 3. Сохранить как есть: column-count вместо сетки: сетка пустила бы порядок слева направо и сломала бы нумерацию; break-inside:avoid у карточки — иначе вопрос окажется внизу одной колонки, а ответ вверху другой; нативные details и summary: поиск по странице сам раскрывает найденный вопрос, а до гидратации всё уже работает.
Компонент «Аккордеон-колонки» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

npx shadcn@latest add https://vibeui.ru/r/pro/accordion-015.json

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

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

Компонент самодостаточен: один файл, без зависимостей, палитра в --vibeui-accordion-015-*. Колонки — CSS columns с break-inside:avoid у карточки, число колонок задаёт проп columns (1–3) и включается от ширины компонента через @container: до 40rem один столбец, до 60rem не больше двух. Раскрытие держат нативные details/summary, разделы независимы. Тема — light-dark() по color-scheme окружения.

Теги

  • accordion
  • faq
  • columns
  • masonry
  • cards
  • numbered
  • details
  • questions
Исходник компонента

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

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