Billing

A profile billing view with current plan, payment method, invoice history, and an upgrade prompt. Use it where members manage subscriptions and receipts.

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import {
  CreditCard,
  Download,
  FileText,
  Package,
  RefreshCw,
  Settings,
  Zap,
} from "lucide-react";

const invoices = [
  {
    id: "INV-001",
    date: "Mar 1, 2024",
    amount: "$29.00",
    status: "Paid",
  },
  {
    id: "INV-002",
    date: "Feb 1, 2024",
    amount: "$29.00",
    status: "Paid",
  },
  {
    id: "INV-003",
    date: "Jan 1, 2024",
    amount: "$29.00",
    status: "Paid",
  },
];

export default function UserBilling() {
  return (
    <div className="container mx-auto px-4 py-6 md:px-6 2xl:max-w-[1400px]">
      <div className="mx-auto max-w-4xl">
        {/* Header */}
        <div className="mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row">
          <div>
            <h1 className="text-2xl font-semibold">Billing & Subscription</h1>
            <p className="text-muted-foreground text-sm">
              Manage your subscription and billing details
            </p>
          </div>
          <Button variant="outline">
            <Settings className="mr-2 size-4" />
            Billing Settings
          </Button>
        </div>

        {/* Current Plan */}
        <Card className="mb-8 p-0">
          <CardContent className="p-6">
            <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
              <div>
                <div className="flex items-center gap-2">
                  <Package className="text-primary size-5" />
                  <h2 className="text-lg font-semibold">Pro Plan</h2>
                  <Badge>Current Plan</Badge>
                </div>
                <p className="text-muted-foreground mt-1 text-sm">
                  $29/month • Renews on April 1, 2024
                </p>
              </div>
              <div className="flex flex-wrap gap-2">
                <Button variant="outline">Change Plan</Button>
                <Button variant="destructive">Cancel Plan</Button>
              </div>
            </div>

            <div className="mt-6 space-y-4">
              <div>
                <div className="mb-2 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Zap className="text-primary size-4" />
                    <span className="text-sm font-medium">API Requests</span>
                  </div>
                  <span className="text-sm">8,543 / 10,000</span>
                </div>
                <Progress value={85.43} className="h-2" />
              </div>

              <div>
                <div className="mb-2 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <RefreshCw className="text-primary size-4" />
                    <span className="text-sm font-medium">Monthly Syncs</span>
                  </div>
                  <span className="text-sm">143 / 200</span>
                </div>
                <Progress value={71.5} className="h-2" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Payment Method */}
        <Card className="mb-8 p-0">
          <CardContent className="p-6">
            <div className="flex flex-col items-start justify-between gap-4 sm:flex-row">
              <div className="space-y-1">
                <h2 className="text-lg font-semibold">Payment Method</h2>
                <div className="flex items-center gap-2">
                  <CreditCard className="text-muted-foreground size-4" />
                  <span className="text-muted-foreground text-sm">
                    Visa ending in 4242
                  </span>
                </div>
              </div>
              <Button variant="outline">Update Payment Method</Button>
            </div>
          </CardContent>
        </Card>

        {/* Billing History */}
        <Card className="p-0">
          <CardContent className="p-6">
            <div className="mb-6 flex flex-col items-start justify-between gap-3 sm:flex-row">
              <h2 className="text-lg font-semibold">Billing History</h2>
              <Button variant="outline" size="sm">
                <Download className="mr-2 size-4" />
                Download All
              </Button>
            </div>

            <div className="space-y-4">
              {invoices.map((invoice) => (
                <div
                  key={invoice.id}
                  className="flex flex-col items-start justify-between gap-3 border-b py-3 last:border-0 sm:flex-row sm:items-center"
                >
                  <div className="flex items-center gap-3">
                    <div className="bg-muted rounded-md p-2">
                      <FileText className="text-muted-foreground size-4" />
                    </div>
                    <div>
                      <p className="font-medium">{invoice.id}</p>
                      <p className="text-muted-foreground text-sm">
                        {invoice.date}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <Badge variant="outline">{invoice.status}</Badge>
                    <span className="font-medium">{invoice.amount}</span>
                    <Button variant="ghost" size="sm">
                      <Download className="size-4" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

About this block

Billing and Subscription is a focused account management view. A page heading and a "Billing Settings" button open the layout, followed by three cards stacked in order. The first card shows the active plan name, its monthly price and renewal date, a "Change Plan" button, a "Cancel Plan" button, and two labeled progress bars that track API request and monthly sync consumption against their limits. The second card displays the saved payment method alongside an "Update Payment Method" button. The third card is a billing history list where each row carries an invoice ID, a date, a status badge, an amount, and a per-row download button, with a "Download All" shortcut in the header.

All three cards are independent sections. You can rewrite the plan name, price, and renewal copy without touching the progress bars, and you can add or remove invoice rows freely. If your product does not expose usage quotas, the progress bar group can be dropped from the plan card without affecting the payment or history sections.

When to use

Reach for this block on a dedicated billing or subscription settings route inside a member account area. It works well for a creative agency or studio that bills clients through its own platform and needs staff to see exactly where their seat quota stands before a renewal. Compared to a minimal plan badge tucked inside a tabbed profile, this layout gives billing its own surface and puts usage data, payment details, and receipt history in one uncluttered place.

A natural flow around it on an Application page:

Before

Page Headings to introduce the account section and orient the member before they reach billing
Tabbed if billing is one tab inside a broader profile settings area

After

Security Logs so members can move straight from billing to reviewing account activity
Form Layouts for a payment update or address form that follows the billing card

What you can customize

Three self-contained cards cover the full billing lifecycle. Swap content in any one without disturbing the others:

Plan card. Update the plan name, price, renewal date, and quota labels to match your tiers; the progress bars read whatever values you pass in.
Payment method. Replace the card brand and last four digits with your actual payment provider data, or swap the credit card icon for another indicator if you support additional methods.
Billing history rows. Add as many invoice rows as you need; each row accepts an ID, a date, a status, an amount, and a download action independently.

Tip: if your free tier has no usage limits, hide the progress bar group and let the plan card stay compact until the member upgrades.

About this block

When to use

A natural flow around it on an Application page:

Before

Page Headings to introduce the account section and orient the member before they reach billing
Tabbed if billing is one tab inside a broader profile settings area

After

Security Logs so members can move straight from billing to reviewing account activity
Form Layouts for a payment update or address form that follows the billing card

What you can customize

Three self-contained cards cover the full billing lifecycle. Swap content in any one without disturbing the others:

Plan card. Update the plan name, price, renewal date, and quota labels to match your tiers; the progress bars read whatever values you pass in.
Payment method. Replace the card brand and last four digits with your actual payment provider data, or swap the credit card icon for another indicator if you support additional methods.
Billing history rows. Add as many invoice rows as you need; each row accepts an ID, a date, a status, an amount, and a download action independently.

Tip: if your free tier has no usage limits, hide the progress bar group and let the plan card stay compact until the member upgrades.

Billing

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize