Billing Bandwidth Usage Chart

Installation

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

Usage

The file also exports billing24Demo, 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 { Billing24, billing24Demo } from "@/components/blocks/billing/billing24";

export default function Page() {
  return <Billing24 {...billing24Demo} />;
}

Props

Types

interface BandwidthPeriod {
  label: string;
  value: number;
}

Behavior notes

• Status is computed from used divided by limit: under 80% is normal (primary color), 80% to under 100% is a warning (amber), and 100% or over is critical (red), and that same status drives both the bar color and the warning message below it.
• The progress percentage is calculated in the component from used and limit, it is never passed in pre-computed, so the bar and the numeric labels can never disagree.
• The projected marker only renders when projected is both provided and greater than used, drawn as a dashed border segment extending past the solid used portion of the same bar.
• The bar chart's y-scale is set from the tallest value in periods, not from limit, so it always fills the available height regardless of how usage compares to the plan allowance.
• There's no auto-refresh or polling built in; the component renders whatever used, limit, projected, and periods values it's given on each render.

Frequently asked questions