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-011?theme=dark

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

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

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

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

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

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

<Timeline011
  title="Вехи проекта"
  points={[
    { date: "14 января", dateTime: "2026-01-14", title: "Старт проекта", text: "Команда собрана" },
    { date: "02 февраля", dateTime: "2026-02-02", title: "Прототип" },
  ]}
/>

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

Настройки

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

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

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

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

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

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

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

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

Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-timeline-011-*. Серверный: хуков нет. Ствол — один сплошной элемент под всеми вехами (псевдоэлемент списка), а не бордюр каждой из них. Узел вехи стоит в средней grid-строке li (grid-template-rows:1fr auto 1fr), поэтому остаётся ровно на стволе независимо от длины текста карточки — карточка растёт в соседнюю 1fr-строку: вверх у нечётных вех, вниз у чётных. На узкой ширине лента не ломается в столбец, а прокручивается по горизонтали. Тема берётся из color-scheme окружения через light-dark(): подложки у блока по умолчанию нет, он лежит на фоне страницы и темнеет вместе с ней, а разрыв ствола вокруг узла держит отдельный токен --vibeui-timeline-011-surface.

Теги

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

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

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