VibeUI
РусEng
Войти

Тарифы и сравнение

Таблица сравнения тарифов

Полная таблица сравнения тарифов: строки сгруппированы по разделам, шапка с ценами и кнопками залипает при прокрутке, на узкой ширине таблица прокручивается вбок.

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

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

  • тексты eyebrow и title над таблицей
  • массив plans: name, price, href и флаг featured у колонок
  • массив groups: заголовок раздела и строки rows со значениями values

Собран из

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

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

Превью

1440pxТема страницы
Таблица сравнения тарифов — Полная таблица сравнения тарифов: строки сгруппированы по разделам, шапка с ценами и кнопками залипает при прокрутке, на узкой ширине таблица прокручивается вбок.

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

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

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

https://vibeui.ru/c/pricing-004?theme=dark

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

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

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

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

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

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

<Pricing004 plans={[{ name: "Команда", price: "1 490 ₽ / мес", href: "#", featured: true }]} groups={[{ title: "Каталог", rows: [{ feature: "Секций", values: ["10", "Все", "Все"] }] }]} />

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

Настройки

Заголовок
title · по умолчанию: Что именно меняется при переходе на следующий тариф
Надзаголовок
eyebrow · по умолчанию: Сравнение
Кнопка колонки
pickLabel · по умолчанию: Выбрать
Акцент
accent · по умолчанию: цвет темы
Подложка
background · по умолчанию: цвет темы

Ещё в разделе «Тарифы и сравнение»

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

Как установить компонент «Таблица сравнения тарифов» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Таблица сравнения тарифов»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-016, heading-001.
Что можно поменять в компоненте «Таблица сравнения тарифов»?
Можно менять: тексты eyebrow и title над таблицей; массив plans: name, price, href и флаг featured у колонок; массив groups: заголовок раздела и строки rows со значениями values. Сохранить как есть: импорты button-016, heading-001 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; залипающую шапку с ценами: на таблице в девять строк пользователь иначе забывает, какая колонка чья; группировку строк через отдельные <tbody> с заголовком в th scope="colgroup": без неё девять признаков подряд не читаются.
Компонент «Таблица сравнения тарифов» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

npx shadcn@latest add https://vibeui.ru/r/pro/pricing-004.json

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

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

Составной блок: импортирует button-016, heading-001 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает. Серверный компонент, один файл, ноль зависимостей. Палитра --vibeui-pricing-004-* объявлена через light-dark(), поэтому блок следует color-scheme окружения; подложки у секции по умолчанию нет, она включается пропом background, а таблица лежит на собственной поверхности --vibeui-pricing-004-card. Разметка — настоящая таблица с несколькими <tbody>: заголовок раздела вынесен в <th scope="colgroup"> с colspan, поэтому скринридер объявляет и раздел, и колонку. Шапка с ценами держится на position:sticky, иначе на длинной таблице теряется, какая колонка чья. Обёртка со overflow-x:auto и min-width:40rem у таблицы. Значение true рисуется словом из valueText.yes, false — из valueText.no.

Теги

  • pricing
  • comparison
  • table
  • grouped
  • composite
Исходник компонента

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

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