Billing Low Credit Warning

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/billing70.tsx instead.

Usage

The file also exports billing70Demo, 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 { Billing70, billing70Demo } from "@/components/blocks/billing/billing70";

export default function Page() {
  return <Billing70 {...billing70Demo} />;
}

Props

Types

interface QuickTopUpAmount {
  value: number;
  label?: string;
}

Behavior notes

• isLow is computed on every render from currentBalance and lowBalanceThreshold. There's no internal timer or polling, pass an updated currentBalance to reflect a new balance.
• The card's border and icon color switch to amber only when currentBalance is at or below lowBalanceThreshold, otherwise it renders with the default card styling.
• Quick top-up amounts are next/link buttons pointed at a single topUpHref, they don't charge a card or update the balance themselves, wire the actual charge into whatever page topUpHref leads to.
• autoRechargeEnabled is a display-only boolean, toggling it requires re-rendering the component with a new value from your own settings state, there's no built-in switch here.
• estimatedDaysRemaining and manageHref are both optional and each independently omit their row when not provided.

Frequently asked questions