VibeUI
РусEng
Войти

Отраслевые секции

Лицензии-билеты с перфорацией и пересчётом от базовой цены

Сравнение лицензий цифрового товара как три «билета» с перфорацией по линии отрыва: в корешке имя, для кого и крупная цена, ниже правила списком «+ / −» с зачёркнутыми запретами. Сверху чипы базовой цены товара и степпер мест для командной лицензии — цены в билетах пересчитываются с pop-анимацией. Коммерческий билет отмечен наклонным стикером «берут чаще».

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

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

  • eyebrow, title, lede, currency
  • licenses: name, factor, seatsIncluded, perExtraSeat, who, rules (с «+ »/«− »), featured
  • samplePrices, minSeats, maxSeats, defaultSeats

Собран из

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

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

Превью

1440pxТема страницы
Лицензии-билеты с перфорацией и пересчётом от базовой цены — Сравнение лицензий цифрового товара как три «билета» с перфорацией по линии отрыва: в корешке имя, для кого и крупная цена, ниже правила списком «+ / −» с зачёркнутыми запретами. Сверху чипы базовой цены товара и степпер мест для командной лицензии — цены в билетах пересчитываются с pop-анимацией. Коммерческий билет отмечен наклонным стикером «берут чаще».

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

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

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

https://vibeui.ru/c/market-003?theme=dark

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

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

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

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

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

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

<Market003
  samplePrices={[990, 2490, 3900]}
  licenses={[
    { name: "Личная", factor: 1, who: "Свои проекты.", rules: ["+ Портфолио", "− Клиентские проекты"] },
    { name: "Команда", factor: 5, seatsIncluded: 10, perExtraSeat: 0.4, who: "До 10 человек.", rules: ["+ Общая библиотека"] },
  ]}
/>

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

Настройки

Заголовок
title · по умолчанию: Одна цена товара — три способа им пользоваться
Мест по умолчанию
defaultSeats · по умолчанию: 10
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

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

Ещё в разделе «Отраслевые секции»

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

Как установить компонент «Лицензии-билеты с перфорацией и пересчётом от базовой цены» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Лицензии-билеты с перфорацией и пересчётом от базовой цены»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-102.
Что можно поменять в компоненте «Лицензии-билеты с перфорацией и пересчётом от базовой цены»?
Можно менять: eyebrow, title, lede, currency; licenses: name, factor, seatsIncluded, perExtraSeat, who, rules (с «+ »/«− »), featured; samplePrices, minSeats, maxSeats, defaultSeats. Сохранить как есть: импорты card-102 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; цена = base × factor, для командной + (seats − seatsIncluded) × perExtraSeat × base; output перемонтируется через key=price ради pop; перфорация — border-bottom dashed у корешка и два полукруга ::before/::after с clip-path inset, залитые фоном секции.
Компонент «Лицензии-билеты с перфорацией и пересчётом от базовой цены» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

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

npx shadcn@latest add https://vibeui.ru/r/pro/market-003.json

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

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

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

Теги

  • marketplace
  • license
  • pricing
  • comparison
  • tickets
  • perforation
  • calculator
  • seats
  • digital-goods
  • composite
Исходник компонента

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

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