Billing overviewPro

A workspace's billing at a glance: the plan and its price monthly or yearly, the card on file as a card you can tilt, usage near its limits, and invoices as lines of what they were for. A failed payment raises a banner with Pay now. On motion.

Installation

When to use

A workspace's billing page at a glance: the plan and its price, the card on file, usage near its limits and the invoices, with a way to pay one that failed.
Subscription products with a few plans and add-ons, where people mostly check what they pay, upgrade and settle a failed payment.

When not to use

Usage-based pricing that needs the spend, where it's heading and alerts: Billing settings.
One invoice in full, to send or record a payment: Invoice detail.

Usage

Billing overview with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1"use client"
2
3import { BillingOverview } from "@/components/dashral/blocks/billing-overview"
4
5export default function Billing() {
6  return (
7    <BillingOverview
8      workspace="Acme Inc."
9      plan={{ id: "growth", name: "Growth", monthly: 199, billing: "monthly", renews: "Dec 14, 2026", includes: ["15 seats", "1M API calls"] }}
10      // The plans above this one, for the Upgrade dialog.
11      plans={[{ id: "business", name: "Business", monthly: 499, includes: ["50 seats", "10M API calls"], note: "Most teams" }]}
12      card={{ brand: "Visa", last4: "4242", expires: "08/28", holder: "Acme Inc." }}
13      meters={[{ id: "seats", label: "Seats", used: 12, limit: 15 }]}
14      invoices={[
15        { id: "INV-31", date: "Nov 14, 2026", title: "Growth plan", detail: "Nov 14 – Dec 13", amount: 199, status: "paid" },
16        { id: "INV-30", date: "Nov 3, 2026", title: "Log retention add-on", detail: "Card declined by the bank", amount: 36, status: "failed" },
17      ]}
18      recipient={{ name: "Olivia Martin", email: "olivia@acme.com" }}
19      // While a promise is pending its button shows it; a thrown Error changes nothing and its message shows at the top.
20      onChangePlan={async (plan, billing) => console.log("switch to", plan.id, billing)}
21      onBillingChange={async (billing) => console.log("billing", billing)}
22      onPay={async (invoice) => console.log("pay", invoice.id)}
23      onUpdateCard={() => console.log("open your card form")}
24    />
25  )
26}

API reference

BillingOverview

A workspace's billing at a glance: the plan and its price (monthly or yearly), the card on file as a card you can tilt, usage of the plan's limits, and the invoices as lines of what they were for, paid, failed, due or refunded. A payment that failed raises a banner with Pay now; paying turns its invoice to Paid. Every part comes from props; every action calls your handler first.

Prop	Type	Default
`workspace`	`string` The workspace the page is for, at the top.	`"Acme Inc."`
`plan`	`OverviewPlan`	`sample`
`card`	`OverviewCard \| null` The card on file; null shows none, with a way to add one.	`sample`
`meters`	`OverviewMeter[]`	`sample`
`period`	`string` When the usage period runs, as shown: "Nov 14 – Dec 13".	`"Nov 14 – Dec 13"`
`invoices`	`OverviewInvoice[]`	`sample`
`recipient`	`{ name: string; email?: string }` Who the invoices go to.	`sample`
`currency`	`string`	`"USD"`
`locale`	`string`	`"en-US"`
`onBillingChange`	`(billing: OverviewBilling) => Promise<void> \| void` Monthly or yearly picked: while the promise is pending the switch shows it; a throw puts it back and says why.	—
`plans`	`OverviewPlanOption[]` The plans to move up to: Upgrade opens them, growing out of the button. Left out or empty, Upgrade calls `onUpgrade`.	`sample`
`onChangePlan`	`(plan: OverviewPlanOption, billing: OverviewBilling) => Promise<void> \| void` Move to a plan from the Upgrade list: its Switch shows it's working while the promise is pending; on success the plan card shows it, a throw says why.	—
`onUpgrade`	`() => void` Upgrade without a list of plans: open your own plans or checkout.	—
`onUpdateCard`	`() => void`	—
`onPay`	`(invoice: OverviewInvoice) => Promise<void> \| void` Pay an invoice that failed or is due: its button shows it's working while the promise is pending; on success it turns Paid.	—
`onDownload`	`(invoice: OverviewInvoice) => void` An invoice without an href: download it yourself.	—
`className`	`string`	—

OverviewPaymentCard

The card on file as a card: its network's logo, chip and number, the holder and when it expires. It tilts toward the pointer with a sheen that follows it, and settles back when the pointer leaves; with reduced motion it stays flat.

Prop	Type	Default
`card`	`OverviewCard` Required.	—
`className`	`string`	—

OverviewMeterTile

One thing the plan limits, as a tile: what's used turning up from zero, its bar growing, and a badge near the limit.

Prop	Type	Default
`meter`	`OverviewMeter` Required.	—
`ready`	`boolean`	`true`

type OverviewBilling

= "monthly" | "yearly"

type OverviewPlan

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`icon`	`React.ReactNode`	—
`monthly`	`number` The price a month, and a year (a year is ten months when left out).	—
`yearly`	`number`	—
`billing`	`OverviewBilling`	—
`renews`	`string` When it renews, as shown: "Dec 14, 2026".	—
`includes`	`string[]` What it includes, in short: "15 seats", "1M API calls".	—

type OverviewPlanOption

A plan to move up to, in the Upgrade list: what it adds (includes), a short note ("Most teams").

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`monthly`	`number`	—
`yearly`	`number`	—
`includes`	`string[]`	—
`note`	`string`	—
`icon`	`React.ReactNode`	—

type OverviewCard

The card on file. mark is its network's logo (white, on the card); left out, Visa's.

Prop	Type	Default
`brand`	`string`	—
`last4`	`string`	—
`expires`	`string`	—
`holder`	`string`	—
`mark`	`React.ReactNode`	—

type OverviewMeter

One thing the plan limits; format writes its numbers, unit follows them.

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`used`	`number`	—
`limit`	`number`	—
`unit`	`string`	—
`format`	`(value: number) => string`	—

type OverviewInvoiceStatus

= "paid" | "failed" | "due" | "refunded"

type OverviewInvoice

An invoice as a line of what it was for: title ("Growth plan"), detail under it (the period, why a payment failed, when a transfer is due).

Prop	Type	Default
`id`	`string`	—
`date`	`string`	—
`title`	`string`	—
`detail`	`string`	—
`amount`	`number`	—
`status`	`OverviewInvoiceStatus`	—
`href`	`string`	—