Subscription Plan Simulator
Pricing calculator: seats, monthly or yearly, VAT and an exact price breakdown. Pro · Shop and payments › Subscriptions and plans
A pricing calculator: seats and billing period in, an exact quote per plan out — line items for flat, per-seat and tiered pricing, the yearly discount, VAT (added or included) and the yearly saving. Amounts are computed in integer minor units and formatted for the locale.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add subscription-plan-simulatornpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { SubscriptionPlanSimulator } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
plans * | SubscriptionPlan[] | Plans with their pricing model: flat, per seat, graduated or volume tiers. | |
seats | number | Number of seats to price. | |
defaultSeats | number | 5 | Initial seats when uncontrolled. Default 5. |
onSeatsChange | (seats: number) => void | Called when the reader changes the seat count. | |
period | 'month' | 'year' | Billing period. | |
defaultPeriod | 'month' | 'year' | 'month' | Initial period when uncontrolled. Default month. |
onPeriodChange | (period: BillingPeriod) => void | Called when the reader switches monthly / yearly. | |
currency * | string | ISO 4217 code of every price. Minor units follow the currency (2 for USD, 0 for JPY). | |
taxMode | 'exclusive' | 'inclusive' | 'none' | 'exclusive' | exclusive (default) adds tax on top; inclusive shows the tax inside the price; none hides it. |
taxRate | number | 0 | Tax rate as a fraction, e.g. 0.2 for 20% VAT. Default 0. |
seatRange | [min: number, max: number] | [1, 100] | Range of the seat slider. Default 1–100. |
onSelect | (plan: SubscriptionPlan, quote: Quote) => void | Called by a plan's button with the plan and its exact quote. | |
loading | boolean | false | Plans are loading: skeleton cards. |
error | ReactNode | Loading failed: shown instead of the plans. | |
title | ReactNode | Heading. Default: labels.title. | |
headingLevel | 2 | 3 | 4 | 5 | 3 | Level of the heading (default 3); plan names take the next level. |
locale | string | BCP 47 locale for prices; defaults to the ThemeProvider's. | |
labels | Partial<SubscriptionPlanSimulatorLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Subscription Manager — Subscription management: status, features, quotas, billing and cancellation
- Billing Plan Card — Subscription management
- Usage Quota — Usage limits
- Product Card — Product card
- Product Grid — Product catalog
- Product Filters — Catalog filters
- Product Spotlight — Featured product: tagged photo, price, rating and actions
- Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
- Guided Product Finder — Product finder wizard: branching questions and why a product fits
- Location Card — Store location: distance, opening hours, pickup options and ordering
- Shopping Cart Drawer — Slide-out cart
- Checkout Summary — Order summary at checkout
Previous: Usage Quota · Next: Article Header · All Shop and payments