Тарифы
Повышение текущего тарифа
Экран биллинга внутри продукта: слева текущий план с расходом лимитов на <progress>, справа предложение апгрейда с разницей в счёте.
Что можно поменять
- тексты currentName, currentPrice, currentPeriod, renewLabel и renewDate
- массив usage: label, used, limit и unit каждой строки расхода
- тексты upgradeName, upgradePrice, upgradeDelta и список upgradeGains
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/pricing-019?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Серверный компонент, один файл, ноль зависимостей. Палитра --vibeui-pricing-019-*, светлая база с градиентной панелью апгрейда. Полоски расхода — нативный <progress> с aria-label, а не div с шириной в процентах: браузер сам объявляет значение и максимум, а число рядом дублирует его текстом. Полоса, перевалившая за 80 %, помечается атрибутом data-high и красится в предупреждающий цвет — именно она и есть аргумент за переход, поэтому апгрейд стоит рядом, а не в письме. Раскладка: столбец до 52rem, две колонки от 52rem.
Теги
- pricing
- billing
- upgrade
- usage
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…