Usage Pricing Calculator
A live estimator with real marginal-tier overage pricing and an annual discount toggle.
- Category
- Components
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Estimate your bill
Props
"use client";
import { useMemo, useState } from "react";
const BASE_FEE = 29;
const INCLUDED_REQUESTS = 10;
const SEAT_PRICE = 12;
const ANNUAL_DISCOUNT = 0.2;
const TIERS = [
{ upTo: 50, rate: 0.9 },
{ upTo: 200, rate: 0.6 },
{ upTo: Infinity, rate: 0.35 },
];
function overageCost(requestsK: number) {
const billable = Math.max(0, requestsK - INCLUDED_REQUESTS);
let remaining = billable;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
The naive version of a pricing slider multiplies total usage by whichever tier's rate the volume happens to land in — which means crossing a tier boundary by one unit can spike the bill by paying the higher rate on usage that was already covered under a cheaper tier. Real usage-based pricing (Stripe, AWS, Twilio) is marginal: each tier only charges for the slice of volume that falls inside its own range, and the overage function here implements exactly that by walking the tier list and consuming remaining billable usage into each tier's span before moving to the next. The non-obvious detail is INCLUDED_REQUESTS: the free allotment is subtracted before the tier walk even starts, so the first tier boundary in the TIERS array represents usage above the free amount, not from zero — an off-by-this is the most common bug when porting a tiered calculator from a backend billing spec into a frontend slider. Caveat: this is an estimate for display only; the source of truth for what a customer is actually billed must live server-side, never trust a client-computed total for an invoice.
Curator’s note
The overage loop breaks early once remaining usage hits zero — without that it would keep iterating (harmlessly, but needlessly) through every tier even after the full volume is already accounted for.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Pricing Page
templatesA pricing page that computes: seat slider, annual toggle and an expandable comparison matrix.
Pricing Toggle Switch
componentsA monthly/yearly billing switch with the price sliding to its new value.
Image Comparison Slider
componentsA draggable before/after divider that reveals one image over another.