Billing Pre Payment Balance

Installation

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

Usage

The file also exports billing97Demo, 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 { Billing97, billing97Demo } from "@/components/blocks/billing/billing97";

export default function Page() {
  return <Billing97 {...billing97Demo} />;
}

Props

Types

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

Behavior notes

• The component is purely presentational. It doesn't fetch or poll a live balance, or track which top-up amount was clicked, so wire your own state and API calls around it.
• Top-up options render as next/link elements pointing at whatever href you give each one, not buttons with an onClick, matching how the invoice download link works elsewhere in this category.
• The balance figure is a plain formatted string, not a number, so currency symbol and decimal formatting are entirely up to the caller.
• The top-up grid is 3 columns on small screens and 4 columns from the sm breakpoint up, so it stays readable with anywhere from two to eight preset amounts.

Frequently asked questions