VibeUI
РусEng
Войти

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

Тарифы школы: формат, слайдер занятий в неделю и «мы vs приложение vs репетитор»

Калькулятор стоимости занятий: сегментный переключатель «группа / пара / индивидуально» с ползущей подложкой, слайдер «занятий в неделю», справа квитанция с зубчатым краем — цена в месяц пересчитывается на лету, ниже цена за занятие, число занятий и что входит; стикер «выбирают 78%». Внизу таблица сравнения «мы vs приложение vs репетитор» с подсвеченной колонкой и отметками ✓ / ~ / ✕.

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

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

  • eyebrow, title, lede, currency, actionLabel, actionHref
  • formats: key, label, perLesson, size, features, sticker; minPerWeek, maxPerWeek, defaultPerWeek, weeksPerMonth
  • compareTitle, compareColumns, compareRows: label, values (yes | no | part | текст)

Собран из

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

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

Превью

1440pxТема страницы
Тарифы школы: формат, слайдер занятий в неделю и «мы vs приложение vs репетитор» — Калькулятор стоимости занятий: сегментный переключатель «группа / пара / индивидуально» с ползущей подложкой, слайдер «занятий в неделю», справа квитанция с зубчатым краем — цена в месяц пересчитывается на лету, ниже цена за занятие, число занятий и что входит; стикер «выбирают 78%». Внизу таблица сравнения «мы vs приложение vs репетитор» с подсвеченной колонкой и отметками ✓ / ~ / ✕.

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

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

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

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

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

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

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

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

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

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

<Pricing031
  title="Платите за занятия, а не за «доступ к платформе»"
  formats={[{ key: "group", label: "Группа", perLesson: 990, size: "до 6 человек", features: ["Носитель раз в неделю"], sticker: "выбирают 78%" }]}
  compareRows={[{ label: "Носитель языка", values: ["yes", "no", "part"] }]}
/>

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

Настройки

Заголовок
title · по умолчанию: Платите за занятия, а не за «доступ к платформе»
Занятий в неделю
defaultPerWeek · по умолчанию: 2
Валюта
currency · по умолчанию: ₽
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

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

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

Как установить компонент «Тарифы школы: формат, слайдер занятий в неделю и «мы vs приложение vs репетитор»» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Тарифы школы: формат, слайдер занятий в неделю и «мы vs приложение vs репетитор»»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: button-013, button-016, slider-013.
Что можно поменять в компоненте «Тарифы школы: формат, слайдер занятий в неделю и «мы vs приложение vs репетитор»»?
Можно менять: eyebrow, title, lede, currency, actionLabel, actionHref; formats: key, label, perLesson, size, features, sticker; minPerWeek, maxPerWeek, defaultPerWeek, weeksPerMonth; compareTitle, compareColumns, compareRows: label, values (yes | no | part | текст). Сохранить как есть: импорты button-013, button-016, slider-013 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; цена = perLesson × perWeek × weeksPerMonth, tabular-nums; стикер с key=format.key перезапускает keyframes pop при смене формата; колонка «мы» — td/th с data-us: подсветка color-mix, рамка 2px по краям, скругления у первой и последней строки.
Компонент «Тарифы школы: формат, слайдер занятий в неделю и «мы vs приложение vs репетитор»» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

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

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

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

Составной блок: импортирует button-013, button-016, slider-013 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.

Теги

  • pricing
  • school
  • language
  • education
  • calculator
  • slider
  • switch
  • comparison
  • table
  • receipt
  • composite
Исходник компонента

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

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