{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-4",
  "description": "A usage metering dashboard card with progress bars for seats, storage, API requests, and bandwidth, a near-limit highlight, an estimated total, and a manage-plan action.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "progress",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/billing/4/billing-block.tsx",
      "content": "import { RiArrowRightUpLine } from \"@remixicon/react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Meter = {\n  label: string\n  used: number\n  limit: number\n  unit: string\n  display: string\n}\n\nconst meters: Meter[] = [\n  { label: \"Seats\", used: 9, limit: 10, unit: \"seats\", display: \"9 / 10\" },\n  {\n    label: \"Storage\",\n    used: 42,\n    limit: 50,\n    unit: \"GB\",\n    display: \"42 / 50 GB\",\n  },\n  {\n    label: \"API Requests\",\n    used: 1.24,\n    limit: 2,\n    unit: \"M\",\n    display: \"1.24M / 2M\",\n  },\n  {\n    label: \"Bandwidth\",\n    used: 96,\n    limit: 250,\n    unit: \"GB\",\n    display: \"96 / 250 GB\",\n  },\n]\n\nfunction MeterRow({ meter }: { meter: Meter }) {\n  const percent = Math.round((meter.used / meter.limit) * 100)\n  const nearLimit = percent >= 85\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <span className=\"text-sm font-medium\">{meter.label}</span>\n        <span\n          className={\n            \"text-xs tabular-nums \" +\n            (nearLimit\n              ? \"text-amber-700 dark:text-amber-400\"\n              : \"text-muted-foreground\")\n          }\n        >\n          {meter.display}\n        </span>\n      </div>\n      <Progress value={percent} />\n    </div>\n  )\n}\n\nexport default function BillingBlock() {\n  return (\n    <section className=\"flex min-h-svh w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <Card className=\"w-full max-w-lg\">\n        <CardHeader className=\"flex-row items-start justify-between gap-3\">\n          <div>\n            <CardTitle className=\"text-base\">Usage This Cycle</CardTitle>\n            <p className=\"mt-1 text-xs text-muted-foreground\">\n              Team plan, resets Aug 1, 2026\n            </p>\n          </div>\n          <Badge variant=\"secondary\">18 Days Left</Badge>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-5\">\n          {meters.map((meter) => (\n            <MeterRow key={meter.label} meter={meter} />\n          ))}\n          <Separator />\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <p className=\"text-sm font-medium\">Estimated total</p>\n              <p className=\"text-xs text-muted-foreground\">\n                Base plan plus metered usage\n              </p>\n            </div>\n            <span className=\"text-lg font-semibold tabular-nums\">$248.00</span>\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button className=\"w-full\">\n            Manage Plan and Limits\n            <RiArrowRightUpLine data-icon=\"inline-end\" aria-hidden=\"true\" />\n          </Button>\n        </CardFooter>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "582px",
    "tier": "free"
  },
  "categories": [
    "billing"
  ],
  "type": "registry:block"
}