Billing Pro Rated Calculation
A billing breakdown for mid-cycle plan changes, showing the credit for unused time on the old plan, the prorated charge for the new plan, and what's due today. An optional note underneath states when the next full billing cycle starts and what it will cost. Built for upgrade or downgrade confirmation screens where someone needs to see exactly why they're being charged a specific amount right now.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-pro-rated-calculation.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing101.tsx instead.
Usage
The file also exports billing101Demo, 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 { Billing101, billing101Demo } from "@/components/blocks/billing/billing101"; export default function Page() { return <Billing101 {...billing101Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Plan change summary" | Heading above the breakdown. |
| description | string | none | Optional one-line note under the heading. |
| lineItems | ProrationLineItem[] | none | Itemized rows shown above the total. Amounts starting with "-" render in a credit color. |
| totalLabel | string | "Total due today" | Label next to the final total. |
| totalDueToday | string | none | The final amount due today, already formatted as a string. |
| nextBillingDate | string | none | When set with nextBillingAmount, shows a note about the next full billing cycle. |
| nextBillingAmount | string | none | The amount of the next full billing cycle, shown alongside nextBillingDate. |
| className | string | none | Extra classes for the outer container. |
Types
interface ProrationLineItem { label: string; amount: string; }
Behavior notes
- This component only renders numbers it's given, it doesn't calculate proration itself. Compute the credit, the new charge, and the total on your backend and pass the formatted results in.
- A line item's amount is colored as a credit (a muted green) purely by checking whether the string starts with "-", so negative-looking values need a literal leading minus sign to get that styling.
- The next-billing note only renders when both nextBillingDate and nextBillingAmount are set, it's fully hidden otherwise.
- totalDueToday isn't computed from lineItems, it's a separate prop, so you can show a $0 total or a credit balance for downgrades without the line items needing to sum to 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.