Pricing calculator
Seat and usage sliders driving a live price breakdown with rolling totals, best-fit plan suggestion, pinnable plans and an annual billing toggle.
Preview
Estimate your plan
Seats people
API calls per month650K
Plan
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | — | { id, name, base, seatPrice, maxSeats, includedUsage, overagePer1k, blurb? }. |
| seats | { min, max, step?, default } | 1–100, default 12 | Seat slider range. |
| usage | { min, max, step?, default } | 0–2M, default 400K | Usage slider range in units. |
| usageUnit | string | "API calls" | Plural name of the usage unit. |
| annualDiscount | number | 0.2 | Discount when billed annually (0.2 = 20%). |
| defaultAnnual | boolean | true | Start with annual billing on. |
| currency / locale | string | "USD" / "en-US" | Money formatting. |
| onQuoteChange | (quote) => void | — | Called with the current plan and prices whenever they change. |
| action | (plan) => ReactNode | — | Call to action under the total. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.