{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "token-usage-meter",
  "type": "registry:ui",
  "title": "Token usage meter",
  "description": "LLM token usage meter showing tokens used against a monthly limit, a labelled progress bar and a percent of budget note with the reset date. Useful in AI apps.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/progress.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/token-usage-meter.tsx",
      "type": "registry:ui",
      "target": "components/ui/token-usage-meter.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Progress } from \"@/components/ui/progress\"\n\nfunction TokenUsageMeter({\n  used = 128_400,\n  limit = 200_000,\n  className,\n}: {\n  used?: number\n  limit?: number\n  className?: string\n}) {\n  const id = React.useId()\n  const pct = Math.min(100, Math.round((used / limit) * 100))\n  return (\n    <div data-slot=\"token-usage-meter\" className={cn(\"space-y-2 rounded-xl border border-border bg-surface p-4 shadow-highlight\", className)}>\n      <div className=\"flex justify-between text-sm\">\n        <span className=\"font-medium text-fg\" id={id}>Token usage</span>\n        <span className=\"font-mono tabular-nums text-fg-muted\">{used.toLocaleString()} / {limit.toLocaleString()}</span>\n      </div>\n      <Progress value={pct} aria-labelledby={id} />\n      <p className=\"text-xs text-fg-muted\">{pct}% of monthly budget · resets on the 1st</p>\n    </div>\n  )\n}\nexport { TokenUsageMeter }\n"
    }
  ]
}