Billing Overview

A billing page in one glance: plan and seats, the next invoice with its cycle progress, a payment card that holds its colours in both themes, usage bars that warn near the limit, and invoices with a one-click retry.

akabilling·subscription·invoices

Install

Run this in any project set up for the shadcn CLI. It copies the Billing Overview source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/billing-overview.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { BillingOverview } from "@/components/billing-overview";

export default function Page() {
  return <BillingOverview />;
}

Built with

A free React block in the Dashboards collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: button, spinner
npm: lucide-react, motion

Props

Read from the Billing Overview source. Everything is optional unless it says required.

Prop	Type	Default
title	string	"Billing"
subtitle	string	"Your plan, what you’ve used this cycle, and every invoice."
planrequired	BillingPlan	—
nextrequired	BillingInvoicePreview	—
cardrequired	BillingCard	—
billingEmail	string	—
usagerequired	BillingUsage[]	—
invoicesrequired	BillingInvoice[]	—
currency	string	"$"
onChangePlan	() => void	—
onUpdateCard	() => void	—
onAddSeats	() => void	—
onExport	() => void	—
onDownload	(invoice: BillingInvoice) => void	—
onRetry	(invoice: BillingInvoice) => Promise<boolean>	—
className	string	—

More in Dashboards

165

Dashboard Header

The top of a dashboard: three trend cards, a this-period-versus-last chart you can scrub day by day, and a goal ring that fills as sales come in.

166

Sales Overview

A year of sales on one page: pick a number up top and the monthly chart, best sellers and channel split all follow it, with a line or bar view to taste.

168

Notification Matrix

Events down the side, email, push and in-app across the top: group checkboxes that go half-checked, locked security rows with a reason, edited cells that glow, and a save bar that floats in only when something changed.

Prop

Type

Default

title

string

"Billing"

subtitle

string

"Your plan, what you’ve used this cycle, and every invoice."

planrequired

BillingPlan

—

nextrequired

BillingInvoicePreview

—

cardrequired

BillingCard

—

billingEmail

string

—

usagerequired

BillingUsage[]

—

invoicesrequired

BillingInvoice[]

—

currency

string

"$"

onChangePlan

() => void

—

onUpdateCard

() => void

—

onAddSeats

() => void

—

onExport

() => void

—

onDownload

(invoice: BillingInvoice) => void

—

onRetry

(invoice: BillingInvoice) => Promise<boolean>

—

className

string

—