Billing Overage Charges

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing82.tsx instead.

Usage

The file also exports billing82Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing82, billing82Demo } from "@/components/blocks/billing/billing82";

export default function Page() {
  return <Billing82 {...billing82Demo} />;
}

Props

Types

interface OverageResource {
  id: string;
  label: string;
  unit: string;
  included: number;
  used: number;
  unitPrice: string;
  overageCost: string;
}

Behavior notes

• Whether a resource is over its limit is computed from used and included on every render (Math.max(0, used - included)); there's no separate isOver flag to set by hand.
• A resource's bar and status text switch to destructive red only once used exceeds included; resources still within their limit show a muted "Within plan" label instead of a cost.
• overageCost is a plain string you compute and pass in per resource, the component doesn't parse unitPrice or do currency math itself.
• totalOverage is also a separate prop rather than a sum the component calculates, so it always matches whatever rounding or currency logic you use on the backend.
• The upgrade button only renders when upgradeHref is passed, so the block works standalone as a pure breakdown when there's nothing to upgrade to.

Frequently asked questions