Billing Metered Usage Forecast
A forecast card that shows a projected end-of-billing-cycle cost next to what's been spent so far, with a trend badge comparing pace to the previous cycle and a progress bar marking how far through the cycle the account currently is. Built for metered SaaS products where customers pay for API calls, compute, or storage and want a heads-up before the invoice arrives.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its card, badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-metered-usage-forecast.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing74.tsx instead.
Usage
The file also exports billing74Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing74, billing74Demo } from "@/components/blocks/billing/billing74"; export default function Page() { return <Billing74 {...billing74Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Usage forecast" | Heading shown in the card header. |
| description | string | none | Optional supporting line under the heading. |
| currencySymbol | string | "$" | Symbol prefixed to both the current and projected amounts. |
| currentCost | number | none | Cost incurred so far this billing cycle. |
| projectedCost | number | none | Projected total cost by the end of the cycle. |
| budget | number | none | Optional budget threshold; when projectedCost exceeds it the footer note switches to a warning. |
| daysElapsed | number | none | Days elapsed in the current billing cycle, used for the progress bar. |
| daysInCycle | number | none | Total length of the billing cycle in days. |
| trendPercent | number | none | Percent change versus the same point in the previous cycle; shown as a colored badge with a trend icon. |
| className | string | none | Extra classes for the outer card. |
Behavior notes
- The forecast numbers (currentCost, projectedCost) are passed in as-is, the component doesn't run any prediction math itself, it only formats and displays what you compute upstream.
- The trend badge picks its icon and color from the sign of trendPercent: up-and-amber for positive, down-and-emerald for negative, a dash for zero or when the prop is omitted.
- The cycle-progress bar is daysElapsed / daysInCycle, capped at 100%, and is purely visual, it does not gate or affect the cost numbers.
- The budget note only renders when budget is provided, and switches between a neutral 'on track' message and a destructive-colored overage message depending on whether projectedCost exceeds it.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.