Usage billingPro
A usage based billing dashboard with a projected spend line, meters against limits, alerts, and an upgrade that morphs into a confirm sheet.
Live block · sample data
- A billing page for usage priced SaaS or infrastructure products.
- Admin dashboards where finance needs spend alerts and invoice history in one place.
- Upgrade moments driven by limits, where the upgrade should explain what changes.
- Use billing-overview for flat seat based plans without meters.
- Use plan-comparison or usage-pricing on a public pricing page.
- Avoid it for a single quota; a usage meter component is enough.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this in the billing area of a usage priced product. Load meters, daily spend, and invoices from your billing provider, save alerts through onAlertsChange, and send the upgrade to your checkout; every charge in the preview is simulated.
example.tsx
import { UsageBilling } from "@/registry/blocks/usage-billing/usage-billing"; export function BillingPage({ usage, plans }: { usage: BillingSnapshot; plans: PlanCatalog }) { return ( <UsageBilling period={usage.period} daily={usage.dailySpend} meters={usage.meters} plan={plans.current} upgrade={plans.next} defaultAlerts={usage.alerts} onAlertsChange={alerts => saveAlerts(alerts)} onUpgrade={plan => startUpgrade(plan.id)} onDownloadInvoice={invoice => downloadPdf(invoice.id)} /> );}UsageBilling
A usage based billing dashboard: spend so far with a projected line and live alert rules on the chart, per meter usage against limits with warning states, a spend alerts editor, invoice history with downloads, and a plan card that grows into an upgrade confirm sheet.
PropTypeDefaultDescription
period{ label: string; start: string; days: number; today: number }billingPeriodThe current billing period and which day it is.dailynumber[]dailySpendUsage charges per day so far. Its length is the number of days elapsed.budgetnumber2000Monthly budget drawn on the chart.metersMeter[]metersMetered resources: id, name, unit (requests, gigabytes, minutes, invocations, seats), used, limit, and an overage price label.planPlancurrentPlanThe current plan: name, monthly price, limits keyed by meter id, and perks.upgradePlan | nullupgradePlanThe plan offered in the upgrade card. Pass null to hide the offer.defaultAlertsSpendAlert[]spendAlertsInitial alerts: amount, email, and slack.onAlertsChange(alerts: SpendAlert[]) => void–Called whenever alerts are added, edited, or removed.invoicesInvoice[]invoicesPast invoices with number, period, issue date, amount, and status.payment{ brand: string; last4: string; expires: string }paymentMethodCard shown on the plan card, the invoices header, and the confirm sheet.onUpgrade(plan: Plan) => Promise<void> | void–Runs the upgrade. Resolve to switch plans, reject to show a declined message. Without it the upgrade is simulated.onDownloadInvoice(invoice: Invoice) => Promise<void> | void–Fetches an invoice PDF. Without it the download is simulated.currencystring"EUR"ISO currency code for every amount.classNamestring–Class on the root.- Tab
- Moves through the chart, plan card, alerts, and invoice downloads.
- Arrow leftorArrow right
- Moves the chart cursor one day at a time while the chart has focus.
- Enter in an alert amount
- Commits the amount; alerts re sort by amount when the field loses focus.
- Escape
- Closes the upgrade sheet unless a payment is in progress.
- The chart is an image with a spoken summary of spend, projection, and budget; its cursor also works from the keyboard.
- Each meter is a meter role with a value text that says when it is near or projected over the limit.
- Warnings pair an icon and words with color. Invoice status pairs a dot with a label.
- The upgrade sheet is a modal dialog that traps Tab, focuses its heading, and returns focus to the plan card.
- The sheet states that the preview takes no payment.
- The spend line draws in once, the projection and alert rules follow; alert rules glide to their new height while you type an amount.
- Meter bars fill with a short stagger. After an upgrade every limit grows, so the bars shrink and warnings clear in place.
- The plan card grows into the confirm sheet on one spring and folds back into the card once the upgrade lands.
- Invoice downloads swap their icon for a spinner, then a check, without changing width.
- Reduced motion removes the draw in, stagger, and flight, and keeps short fades.
- From 700px the chart and plan card share a row, and meters sit beside alerts.
- Below 520px the invoice issue date and overage prices hide; everything else stacks.
- The confirm sheet keeps a 12px margin and stays clear of sticky page chrome.
- The chart is one SVG sized from a ResizeObserver; hover updates only the cursor and tooltip.
- Bars animate transform scale only.
- Sheet flight animates one element's transform and size.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for products billed on usage: API calls, compute, storage, bandwidth, seats.
- Feed daily spend from your billing provider; the projection is the average of the last seven days carried to the end of the period.
- Set plan limits per meter id so the upgrade can recompute every bar.
- Call your checkout or subscription update API in onUpgrade and reject on a declined card.
The full library index for assistants is at /llms.txt.