Billing History & Invoices Table

Dashboards

About

Billing overview with plan and payment method plus an invoices table: status tabs with counts, search, sortable dates, pagination, skeleton loading and an empty state.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Billing History & Invoices Table to your project and fits it to your theme.

Code

How Billing History & Invoices Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BillingInvoicesTable, type BillingInvoice } from "@/components/ui/billing-invoices-table"
const statuses = ["paid", "paid", "paid", "open", "overdue", "refunded"] as const
const invoices: BillingInvoice[] = Array.from({ length: 14 }, (_, i) => ({
  id: `INV-${String(1042 - i).padStart(4, "0")}`, date: new Date(2026, 9 - i, 1).toISOString().slice(0, 10),
  description: i % 4 === 0 ? "Pro plan · 5 seats + add-ons" : "Pro plan · 5 seats", amount: i % 4 === 0 ? 129 : 99, status: i === 0 ? "open" : statuses[i % 6],
}))
export default function BillingInvoicesTableDemo() {
  return (
    <div className="flex min-h-screen justify-center bg-background p-6 sm:p-10">
      <BillingInvoicesTable invoices={invoices} plan={{ name: "Pro", price: 99, interval: "mo", renewsOn: "Nov 1, 2026" }}
        paymentMethod={{ brand: "Visa", last4: "4242", expires: "08/28" }} />
    </div>
  )
}