← All blocks

Subscription, usage and invoices

billing · subscription-usage · billing-subscription-usage

npx shadcn@latest add @plus-ui/billing-subscription-usage

Default content

{
  "eyebrow": "pellora",
  "title": "Billing",
  "description": "Plan, usage and invoices for the Pellora workspace.",
  "actions": [
    {
      "label": "Billing settings",
      "href": "#billing-settings",
      "variant": "secondary"
    }
  ],
  "plan": {
    "label": "Current plan",
    "name": "Team",
    "badge": "Monthly",
    "price": "$240",
    "period": "per month",
    "summary": "12 seats · 3 projects · 25,000 build minutes",
    "renews": "Renews Nov 1, 2026",
    "features": [
      "Unlimited preview deployments",
      "SAML single sign-on",
      "30-day log retention",
      "99.95% uptime SLA"
    ],
    "actions": [
      {
        "label": "Change plan",
        "href": "#plans",
        "variant": "primary"
      },
      {
        "label": "Cancel plan",
        "href": "#cancel",
        "variant": "secondary"
      }
    ]
  },
  "estimate": {
    "label": "Estimated next invoice",
    "value": "$318.40",
    "note": "Based on usage so far this cycle. Billed Nov 1.",
    "lines": [
      {
        "label": "Team plan, 12 seats",
        "value": "$240.00"
      },
      {
        "label": "Bandwidth overage, 156 GB",
        "value": "$62.40"
      },
      {
        "label": "Extra concurrent builds",
        "value": "$16.00"
      }
    ]
  },
  "usage": {
    "title": "Usage this cycle",
    "period": "Oct 1 – Oct 31",
    "items": [
      {
        "label": "Build minutes",
        "used": "18,420",
        "limit": "25,000",
        "percent": 74,
        "note": "Resets in 22 days"
      },
      {
        "label": "Bandwidth",
        "used": "1.16 TB",
        "limit": "1 TB",
        "percent": 100,
        "note": "156 GB over · $0.40 per GB"
      },
      {
        "label": "Serverless invocations",
        "used": "41.2M",
        "limit": "50M",
        "percent": 82,
        "note": "Projected 56M by month end"
      },
      {
        "label": "Seats",
        "used": "11",
        "limit": "12",
        "percent": 92,
        "note": "1 seat free"
      },
      {
        "label": "Edge cache storage",
        "used": "38 GB",
        "limit": "100 GB",
        "percent": 38,
        "note": "Across 3 projects"
      }
    ]
  },
  "payment": {
    "title": "Payment method",
    "brand": "Visa",
    "masked": "•••• 4242",
    "expiry": "Expires 08/28",
    "update": "Update",
    "details": [
      {
        "label": "Billing email",
        "value": "[email protected]"
      },
      {
        "label": "Billed to",
        "value": "Pellora GmbH · Torstraße 109, Berlin"
      },
      {
        "label": "VAT ID",
        "value": "DE 3•••••819"
      }
    ]
  },
  "invoices": {
    "title": "Invoices",
    "link": {
      "label": "Download all",
      "href": "#invoices"
    },
    "columns": {
      "number": "Invoice",
      "date": "Date",
      "description": "Description",
      "amount": "Amount",
      "status": "Status",
      "download": "Download"
    },
    "statusLabels": {
      "paid": "Paid",
      "open": "Open",
      "failed": "Failed",
      "refunded": "Refunded"
    },
    "items": [
      {
        "number": "RVL-2026-0912",
        "date": "Oct 1, 2026",
        "description": "Team · Sep usage",
        "amount": "$296.80",
        "status": "open",
        "href": "#inv-0912"
      },
      {
        "number": "RVL-2026-0811",
        "date": "Sep 1, 2026",
        "description": "Team · Aug usage",
        "amount": "$271.20",
        "status": "paid",
        "href": "#inv-0811"
      },
      {
        "number": "RVL-2026-0710",
        "date": "Aug 1, 2026",
        "description": "Team · Jul usage",
        "amount": "$258.00",
        "status": "failed",
        "href": "#inv-0710"
      },
      {
        "number": "RVL-2026-0709",
        "date": "Aug 4, 2026",
        "description": "Retry of RVL-2026-0710",
        "amount": "$258.00",
        "status": "paid",
        "href": "#inv-0709"
      },
      {
        "number": "RVL-2026-0608",
        "date": "Jul 1, 2026",
        "description": "Team · Jun usage",
        "amount": "$240.00",
        "status": "paid",
        "href": "#inv-0608"
      },
      {
        "number": "RVL-2026-0507",
        "date": "Jun 1, 2026",
        "description": "Pro → Team proration",
        "amount": "−$18.50",
        "status": "refunded",
        "href": "#inv-0507"
      }
    ]
  }
}