Billing
Invoice tables, payment method cards, subscription management, and usage meters.
Invoice Table
Table of billing invoices with status badges and download actions.
Preview
No preview available
See the code snippet below for usage.
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
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
No preview available
See the code snippet below for usage.
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} />;}