Loading...
Loading...
> A subscription status card showing current plan, usage meters, and billing actions. Perfect for SaaS billing dashboards.
1import { BillingSummaryCard } from "@/components/ui/billing-summary-card"
[CURRENT PLAN]:
Pro
$29/mo
Next billing: Jan 15, 2025
[INCLUDES]:
[USAGE THIS PERIOD]:
1<BillingSummaryCard2 plan={{3 name: "Pro",4 price: 29,5 interval: "month",6 features: ["Unlimited projects", "Priority support"],7 }}8 status="active"9 currentPeriodEnd={new Date("2025-01-15")}10 usage={[11 { name: "API Calls", used: 8500, limit: 10000 },12 { name: "Storage", used: 4.2, limit: 5, unit: "GB" },13 ]}14 onUpgrade={() => handleUpgrade()}15 onManageBilling={() => handleManageBilling()}16/>
[CURRENT PLAN]:
Pro Trial
$0/mo
Trial ends in -370 days
1<BillingSummaryCard2 plan={{ name: "Pro Trial", price: 0, interval: "month" }}3 status="trial"4 trialEnd={new Date("2025-01-10")}5/>
[CURRENT PLAN]:
Pro
$29/mo
Action required: Update payment method
1<BillingSummaryCard2 plan={{ name: "Pro", price: 29, interval: "month" }}3 status="past_due"4/>
[CURRENT PLAN]:
Starter
$9/mo
[USAGE THIS PERIOD]:
Approaching limit
Approaching limit
1<BillingSummaryCard2 plan={{ name: "Starter", price: 9, interval: "month" }}3 status="active"4 usage={[5 { name: "API Calls", used: 950, limit: 1000 },6 { name: "Storage", used: 1.8, limit: 2, unit: "GB" },7 ]}8/>
| Prop | Type | Default | Description |
|---|---|---|---|
| plan* | BillingPlan | - | Current plan details (name, price, interval, features). |
| status* | "active" | "trial" | "past_due" | "canceled" | "paused" | - | Billing status. |
| currentPeriodEnd | Date | - | Current billing period end date. |
| trialEnd | Date | - | Trial end date (when status is trial). |
| usage | UsageItem[] | - | Array of usage items to display. |
| onUpgrade | () => void | - | Upgrade button click handler. |
| onManageBilling | () => void | - | Manage billing click handler. |
| onCancel | () => void | - | Cancel subscription click handler. |
| showUpgrade | boolean | true | Show upgrade button. |