VibeUI
РусEng
Войти

Шаги и таймлайн

Двусторонние вехи

Вертикальная лента вех по обе стороны от общего ствола: нечётные слева, чётные справа. На узкой ширине обе стороны сходятся в один столбец у левого края, без горизонтальной прокрутки.

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

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

  • заголовок через title
  • вехи через points: date, dateTime, title и необязательный text
  • цвет акцента через accent

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

Превью

1440pxТема страницы
Двусторонние вехи — Вертикальная лента вех по обе стороны от общего ствола: нечётные слева, чётные справа. На узкой ширине обе стороны сходятся в один столбец у левого края, без горизонтальной прокрутки.

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

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

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

https://vibeui.ru/c/timeline-013?theme=dark

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

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

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

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

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

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

<Timeline013
  title="История компании"
  points={[
    { date: "Март 2019", dateTime: "2019-03", title: "Основание компании", text: "Три человека и первый клиент" },
    { date: "Октябрь 2020", dateTime: "2020-10", title: "Первый офис" },
  ]}
/>

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

Настройки

Заголовок
title · по умолчанию: История компании
Акцент
accent · по умолчанию: цвет темы
Подложка
background · по умолчанию: цвет темы

Ещё в разделе «Шаги и таймлайн»

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

Как установить компонент «Двусторонние вехи» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Двусторонние вехи»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Двусторонние вехи»?
Можно менять: заголовок через title; вехи через points: date, dateTime, title и необязательный text; цвет акцента через accent. Сохранить как есть: локальную палитру --vibeui-timeline-013-* и не подменять её токенами вашей темы; чередование сторон по чётности позиции в points — вехи не выбирают сторону сами; container-type на корне и переключение раскладки по ширине контейнера, а не видового окна.
Компонент «Двусторонние вехи» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

npx shadcn@latest add https://vibeui.ru/r/pro/timeline-013.json

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

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

Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-timeline-013-*. Серверный: хуков нет. Ствол — псевдоэлемент списка (ol::before), а не бордюр каждой вехи. На узком контейнере li — grid из двух колонок (узел, карточка), все карточки у правого края ствола. От 30rem ширины контейнера ствол уходит в центр, li переключается на три колонки, и карточки расходятся по чётности: nth-child(odd) — влево от ствола с выравниванием текста по правому краю, nth-child(even) — вправо с выравниванием по левому. Переключение — на container-type самого блока, а не на медиа-запросе видового окна, поэтому раскладка следует ширине родителя.

Теги

  • timeline
  • milestones
  • history
  • vertical
Исходник компонента

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

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