Billing API Credits

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its card, 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/billing20.tsx instead.

Usage

The file also exports billing20Demo, 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 { Billing20, billing20Demo } from "@/components/blocks/billing/billing20";

export default function Page() {
  return <Billing20 {...billing20Demo} />;
}

Props

Types

interface TopUpOption {
  amount: string;
  credits: string;
  href: string;
}

Behavior notes

• The balance bar's fill percent is balance divided by typicalMonthlyUsage, clamped to 100, so it reads as 'how much of a normal month is left' rather than a fraction of some fixed cap.
• The bar and the low-balance warning both switch on when that percent falls at or below lowBalanceThreshold, computed on every render, there's no separate flag to set by hand.
• Top-up buttons are plain links (topUpOptions[].href), not buttons with onClick handlers, so wiring a real purchase means pointing each href at your checkout route.
• The credits grid is fixed at three columns regardless of how many topUpOptions are passed; four or more items will wrap onto a second row.

Frequently asked questions