Billing

Invoice tables, payment method cards, subscription management, and usage meters.

Invoice Table

Table of billing invoices with status badges and download actions.

Preview

Invoice	Date	Amount	Status
INV-001	Jan 1, 2024	49	Paid
INV-002	Feb 1, 2024	49	Paid
INV-003	Mar 1, 2024	49	Pending

Invoice Table.tsx

import { InvoiceTable } from "@launchapp/design-system/blocks/billing";const invoices = [  { id: "INV-001", date: "2024-01-01", amount: 49, currency: "USD", status: "paid", downloadUrl: "#" },  { id: "INV-002", date: "2024-02-01", amount: 49, currency: "USD", status: "paid", downloadUrl: "#" },];export default function Page() {  return <InvoiceTable invoices={invoices} onDownload={(id) => console.log("download", id)} />;}

Payment Method Card

Card displaying a saved payment method with default badge and remove action.

Preview

Visa •••• 4242

Default

Expires 12/2026

Mastercard •••• 5353

Expires 08/2027

Payment Method Card.tsx

import { PaymentMethodCard } from "@launchapp/design-system/blocks/billing";export default function Page() {  return (    <PaymentMethodCard      type="card"      brand="Visa"      last4="4242"      expiryMonth={12}      expiryYear={2026}      isDefault={true}      onRemove={() => console.log("remove")}      onSetDefault={() => console.log("set default")}    />  );}

Subscription Manager

Plan picker with billing interval toggle and current plan indicator.

Preview

Change plan

Current plan

Starter

$9/mo/ mo

month

5 projects
10GB storage
Community support

Pro

$29/mo/ mo

month

Unlimited projects
100GB storage
Priority support

Enterprise

$99/mo/ mo

month

Everything in Pro
SSO
Dedicated support

Subscription Manager.tsx

import { SubscriptionManager } from "@launchapp/design-system/blocks/billing";const plans = [  { id: "starter", name: "Starter", price: "$9/mo", billingCycle: "month", features: ["5 projects", "10GB storage"] },  { id: "pro", name: "Pro", price: "$29/mo", billingCycle: "month", features: ["Unlimited projects", "100GB storage"] },];export default function Page() {  return (    <SubscriptionManager      plans={plans}      currentPlanId="starter"      onChangePlan={(id) => console.log("change to", id)}    />  );}

Usage Meter

Visual usage meter showing current consumption against plan limits.

Preview

Plan Usage

Storage

3.2 / 10 GB

API CallsWarning

7,500 / 10,000 calls

Usage Meter.tsx

import { UsageMeter } from "@launchapp/design-system/blocks/billing";const metrics = [  { id: "api_calls", label: "API Calls", current: 7500, limit: 10000, unit: "calls" },  { id: "storage", label: "Storage", current: 3.2, limit: 10, unit: "GB" },];export default function Page() {  return <UsageMeter metrics={metrics} />;}

Billing History

Invoice history table with status, amounts, and download links.

Preview

Billing History

3 invoicesTotal paid: $5800.00

Invoice	Date	Amount	Status
INV-001	Jan 1, 2024	2900	Paid
INV-002	Feb 1, 2024	2900	Paid
INV-003	Mar 1, 2024	2900	Pending

Billing History.tsx

import { BillingHistory } from "@launchapp/design-system/blocks/billing";const invoices = [  { id: "1", number: "INV-001", date: "2024-01-01", amount: "2900", status: "paid" },  { id: "2", number: "INV-002", date: "2024-02-01", amount: "2900", status: "paid" },  { id: "3", number: "INV-003", date: "2024-03-01", amount: "2900", status: "pending" },];export default function Page() {  return (    <BillingHistory      invoices={invoices}      onDownload={(invoice) => console.log("download", invoice.id)}    />  );}

Quota Usage Bar

Segmented usage bar showing quota consumption across multiple resource types.

Preview

Storage Quota

Your current storage usage by type.

Files

3.2 / 10 GB(32%)

Media

1.8 / 5 GB(36%)

Backups

0.5 / 2 GB(25%)

Quota Usage Bar.tsx

import { QuotaUsageBar } from "@launchapp/design-system/blocks/billing";const quotas = [  { id: "files", name: "Files", used: 3.2, limit: 10, unit: "GB" },  { id: "media", name: "Media", used: 1.8, limit: 5, unit: "GB" },  { id: "backups", name: "Backups", used: 0.5, limit: 2, unit: "GB" },];export default function Page() {  return (    <QuotaUsageBar      title="Storage Quota"      quotas={quotas}      onUpgrade={() => console.log("upgrade")}    />  );}

Subscription Usage Meter

Multi-metric usage meter showing plan limits with visual progress bars.

Preview

Usage

Pro

monthly

Overall:53%

Current Period

Storage

32/100GB32%

API Calls

75.0k/100.0kcalls75%

Team Members

8/1553%

Subscription Usage Meter.tsx

import { SubscriptionUsageMeter } from "@launchapp/design-system/blocks/billing";const metrics = [  { id: "storage", label: "Storage", used: 32, limit: 100, unit: "GB" },  { id: "api", label: "API Calls", used: 75000, limit: 100000, unit: "calls" },  { id: "members", label: "Team Members", used: 8, limit: 15 },];export default function Page() {  return (    <SubscriptionUsageMeter      planName="Pro"      metrics={metrics}    />  );}

← PreviousApp Layouts

Next →Blog