Billing Storage Quota Manager

Installation

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

Usage

The file also exports billing128Demo, 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 { Billing128, billing128Demo } from "@/components/blocks/billing/billing128";

export default function Page() {
  return <Billing128 {...billing128Demo} />;
}

Props

Types

interface StorageBreakdownItem {
  label: string;
  percent: number;
}

interface StorageTier {
  id: string;
  label: string;
  priceMonthly: number;
}

Behavior notes

• The progress bar switches from primary to amber at 90% usage and to the destructive color at 100% or over; a matching badge and warning note appear at both thresholds.
• Selected tier is local state; picking a different tier recalculates the "New monthly total" line as basePriceMonthly plus the tier's priceMonthly.
• Clicking upgrade moves through idle, loading, and upgraded states with a 900ms simulated delay and a disabled button in between; this is UI feedback only, no request is sent.
• Switching tiers after an upgrade resets the button back to its idle state so the flow can be repeated.
• The bar carries role="progressbar" with matching aria-value attributes, and usage is also shown as plain text above it.

Frequently asked questions