{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "gauge",
  "name": "Gauge",
  "category": "Data display",
  "description": "A half-circle meter for one value against a known range: a score, a quota, a target.",
  "tags": [
    "gauge",
    "meter",
    "score",
    "speedometer",
    "health score",
    "nps",
    "target",
    "dial"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "gauge",
      "score dial",
      "meter",
      "health score",
      "quota dial",
      "target progress"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "radial-progress",
      "usage-meter"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/gauge",
  "markdownUrl": "https://mian.ro/ai/components/gauge.md",
  "classes": [
    {
      "name": "mn-gauge",
      "description": "The dial. Set --v from 0 to 100. Takes a colour role."
    },
    {
      "name": "mn-gauge-value",
      "description": "The number in the middle."
    },
    {
      "name": "mn-gauge-sm",
      "description": "A smaller dial."
    },
    {
      "name": "mn-gauge-scale",
      "description": "Optional min and max labels under the dial."
    },
    {
      "name": "--size · --thick",
      "description": "Width of the dial and thickness of its arc."
    }
  ],
  "accessibility": [
    "Use role=\"meter\" with aria-valuemin, aria-valuemax, aria-valuenow and a label.",
    "Write the value as text inside the dial; the arc repeats it.",
    "If colour carries meaning (good, warning, bad), say it in words nearby."
  ],
  "examples": [
    {
      "title": "Scores",
      "description": null,
      "html": "<div class=\"mn-row\" style=\"--mn-gap:2rem;align-items:flex-end\">\n  <div><div class=\"mn-gauge\" role=\"meter\" aria-label=\"Design score\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"72\" style=\"--v:72\"><span class=\"mn-gauge-value\">72</span></div><p class=\"mn-gauge-scale\"><span>0</span><span>100</span></p></div>\n  <div class=\"mn-gauge mn-gauge-sm mn-success\" role=\"meter\" aria-label=\"Uptime\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"99\" style=\"--v:99\"><span class=\"mn-gauge-value\">99%</span></div>\n  <div class=\"mn-gauge mn-gauge-sm mn-warning\" role=\"meter\" aria-label=\"Storage used\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"81\" style=\"--v:81\"><span class=\"mn-gauge-value\">81%</span></div>\n</div>"
    }
  ],
  "css": ".mn-gauge { --v: 0; --size: 11rem; --thick: .85rem; position: relative; display: grid; place-items: end center; width: var(--size); max-width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }\n.mn-gauge::before {\n  content: \"\"; position: absolute; inset: 0 0 -100% 0; border-radius: 50%;\n  background: conic-gradient(from -90deg, var(--_c, var(--mn-primary)) calc(var(--v) * 1.8deg), var(--mn-surface-2) 0 180deg, transparent 0);\n  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));\n  mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));\n}\n.mn-gauge-value { position: relative; font: 700 1.6rem/1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }\n.mn-gauge-sm { --size: 7.5rem; --thick: .6rem; }\n.mn-gauge-sm .mn-gauge-value { font-size: 1.15rem; }\n.mn-gauge-scale { display: flex; justify-content: space-between; width: var(--size, 11rem); max-width: 100%; margin: .3rem 0 0; color: var(--mn-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/gauge.json"
  }
}