Billing On Demand Billing

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

Usage

The file also exports billing80Demo, 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 { Billing80, billing80Demo } from "@/components/blocks/billing/billing80";

export default function Page() {
  return <Billing80 {...billing80Demo} />;
}

Props

Types

interface ResourceUsage {
  id: string;
  label: string;
  unit: string;
  used: number;
  includedLimit: number;
  unitPrice: string;
  currentCost: string;
}

Behavior notes

• Billing mode and the auto-recharge switch are both local state, seeded from defaultMode and defaultAutoRecharge; toggling either only changes what's shown, it doesn't call any billing API.
• Switching to "fixed" keeps the usage bars visible but hides per-resource cost and the estimated total, since a flat rate makes them informational rather than what's actually billed.
• Each resource's bar fill is used divided by includedLimit, clamped to 100%, and turns amber once used exceeds includedLimit; the component doesn't compute currentCost itself, that string comes from your data.
• The auto-recharge switch is a real toggle button with role="switch" and aria-checked, and its helper text changes between the threshold/amount summary and an "off" explanation based on the current state.

Frequently asked questions