Slide to the team size and pick a plan, add-ons, billing and currency: the quote adds up line by line, with volume discounts, and the total counts to its new value.
When to use
- A quote that adds up line by line: seats, plan, add-ons, billing and currency.
- Per-seat and usage-based pricing, where the price depends on the buyer.
When not to use
- Flat prices: Pricing tiers.
- Enterprise deals priced in a conversation: a Talk to sales action.
Usage
Pricing calculator with your own data: every prop has the sample as its default, so pass only what you have.
import { PricingCalculator } from "@/components/dashral/blocks/pricing-calculator"
<PricingCalculator
plans={plans}
addOns={addOns}
currencies={currencies}
salesHref="/contact"
onCheckout={(quote) => api.checkout.create(quote)}
/>API reference
PricingCalculator
A pricing calculator: pick the team size (with volume discounts by bracket), a plan, add-ons, monthly or yearly and a currency, and the quote adds up line by line as you go — per seat, the volume discount, each add-on, the yearly saving and the total, which counts to its new value. Plans that don't fit the team size step aside. On phones the total rides along at the bottom. Every part comes from props: your plans, add-ons, brackets and currencies, and onCheckout gets the quote.
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Pricing" |
title | React.ReactNode | sample |
description | React.ReactNode | sample |
plans | CalculatorPlan[] | sample |
addOns | CalculatorAddOn[] | sample |
brackets | CalculatorBracket[] | sample |
currencies | Record<string, CalculatorCurrency>By currency code; the first is your base currency (rate 1). | sample |
maxSeats | number | sample |
yearlyOff | numberThe share off when billed yearly. | 0.2 |
initial | { seats: number; plan: string; billing: Billing; currency: string; addOns: string[] } | sample |
salesHref | string"Talk to sales" for teams past maxSeats. | "#" |
onCheckout | (quote: Quote) => voidThe button under the quote, with the quote as it stands. | — |
type Billing
= "monthly" | "yearly"type CalculatorPlan
A plan, priced per seat a month (in your base currency); maxSeats makes it step aside for bigger teams.
| Prop | Type | Default |
|---|---|---|
id | string | — |
name | string | — |
blurb | string | — |
perSeat | number | — |
maxSeats | number | — |
features | string[] | — |
popular | boolean | — |
type CalculatorAddOn
An add-on: a flat price a month, or a price per seat, or both; free with includedIn.
| Prop | Type | Default |
|---|---|---|
id | string | — |
name | string | — |
detail | string | — |
flat | number | — |
perSeat | number | — |
includedIn | string | — |
type CalculatorBracket
A volume bracket: seats from–to, and the share off each seat.
| Prop | Type | Default |
|---|---|---|
from | number | — |
to | number | — |
off | number | — |
label | string | — |
type CalculatorCurrency
A currency the quote can show in: its rate from your base currency, its locale, the unit lines round to, and cents.
| Prop | Type | Default |
|---|---|---|
rate | number | — |
locale | string | — |
unit | number | — |
cents | boolean | — |
type Quote
The quote as it stands, for your checkout: every amount in the picked currency, a month.
| Prop | Type | Default |
|---|---|---|
seats | number | — |
plan | CalculatorPlan | — |
addOns | CalculatorAddOn[] | — |
billing | Billing | — |
currency | string | — |
lines | { seats: number; volumeOff: number; addOns: number; yearlyOff: number } | — |
perMonth | number | — |