{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "usage-meter",
  "name": "Usage meter",
  "category": "Data display",
  "description": "Plan usage against limits, seats, storage, API calls, with warning and over-limit states.",
  "tags": [
    "usage",
    "meter",
    "quota",
    "limits",
    "plan usage",
    "billing",
    "storage",
    "saas",
    "consumption"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "plan usage",
      "quota",
      "storage used",
      "seats used",
      "billing limits"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/usage-meter",
  "markdownUrl": "https://mian.ro/ai/components/usage-meter.md",
  "classes": [
    {
      "name": "mn-meters",
      "description": "A stack of meters."
    },
    {
      "name": "mn-meter",
      "description": "One meter: mn-meter-head (label and numbers), a progress bar, mn-meter-note."
    },
    {
      "name": "mn-progress mn-warning · mn-danger",
      "description": "Colour the bar when near or over the limit; the note follows."
    }
  ],
  "accessibility": [
    "Give the bar role=\"meter\" with aria-valuenow, aria-valuemin, aria-valuemax and aria-label.",
    "State the numbers in text (“8.4 GB of 10 GB”): the bar alone is not enough."
  ],
  "examples": [
    {
      "title": "Plan usage",
      "description": null,
      "html": "<div class=\"mn-card\" style=\"max-width:26rem\"><div class=\"mn-card-header\"><h3 class=\"mn-card-title\">Team plan</h3><p class=\"mn-card-description\">Resets on 1 October</p></div>\n<div class=\"mn-card-body mn-meters\">\n  <div class=\"mn-meter\"><p class=\"mn-meter-head\"><span>Seats</span><span>7 of 10</span></p><div class=\"mn-progress\" role=\"meter\" aria-label=\"Seats\" aria-valuemin=\"0\" aria-valuemax=\"10\" aria-valuenow=\"7\" style=\"--_v:70%\"></div></div>\n  <div class=\"mn-meter\"><p class=\"mn-meter-head\"><span>Storage</span><span>8.4 of 10 GB</span></p><div class=\"mn-progress mn-warning\" role=\"meter\" aria-label=\"Storage\" aria-valuemin=\"0\" aria-valuemax=\"10\" aria-valuenow=\"8.4\" style=\"--_v:84%\"></div><p class=\"mn-meter-note\">84% used, consider archiving old files.</p></div>\n  <div class=\"mn-meter\"><p class=\"mn-meter-head\"><span>API calls</span><span>104,210 of 100,000</span></p><div class=\"mn-progress mn-danger\" role=\"meter\" aria-label=\"API calls\" aria-valuemin=\"0\" aria-valuemax=\"100000\" aria-valuenow=\"104210\" style=\"--_v:100%\"></div><p class=\"mn-meter-note\">Over the limit since 22 September. Extra calls are billed at €0.40 per 1,000.</p></div>\n</div></div>"
    }
  ],
  "css": ".mn-meters { display: grid; gap: 1.25rem; }\n.mn-meter { display: grid; gap: .45rem; }\n.mn-meter > * { margin: 0; }\n.mn-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; font-size: var(--mn-text-sm); }\n.mn-meter-head > :first-child { font-weight: 600; }\n.mn-meter-head > :last-child { color: var(--mn-muted); font-variant-numeric: tabular-nums; }\n.mn-meter-note { color: var(--mn-muted); font-size: .8125rem; }\n.mn-meter .mn-warning ~ .mn-meter-note, .mn-meter:has(.mn-warning) .mn-meter-note { color: var(--mn-warning-text); }\n.mn-meter:has(.mn-danger) .mn-meter-note { color: var(--mn-danger-text); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/usage-meter.json"
  }
}