{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "stat",
  "name": "Stat",
  "category": "Data display",
  "description": "Key metrics with labels and trend deltas, alone or in a joined row.",
  "tags": [
    "stat",
    "metric",
    "kpi",
    "number",
    "dashboard"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "kpi",
      "metric card",
      "dashboard numbers",
      "revenue stat",
      "trend delta"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "figures"
    ],
    "avoid": null
  },
  "url": "https://mian.ro/components/stat",
  "markdownUrl": "https://mian.ro/ai/components/stat.md",
  "classes": [
    {
      "name": "mn-stats",
      "description": "Joined responsive row."
    },
    {
      "name": "mn-stat",
      "description": "One metric."
    },
    {
      "name": "mn-stat-label · mn-stat-value · mn-stat-delta",
      "description": "Parts. Add mn-up or mn-down to the delta."
    }
  ],
  "accessibility": [
    "Deltas use both colour and an arrow; add visually hidden text such as \"increase\" if the arrow is decorative."
  ],
  "examples": [
    {
      "title": "Dashboard row",
      "description": null,
      "html": "<div class=\"mn-stats\">\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Revenue</span><span class=\"mn-stat-value\">€45,231</span><span class=\"mn-stat-delta mn-up\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5M6 11l6-6 6 6\"/></svg> 20.1% <span class=\"mn-sr-only\">increase</span></span></div>\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Subscribers</span><span class=\"mn-stat-value\">2,350</span><span class=\"mn-stat-delta mn-up\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5M6 11l6-6 6 6\"/></svg> 18%</span></div>\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Churn</span><span class=\"mn-stat-value\">3.2%</span><span class=\"mn-stat-delta mn-down\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M6 13l6 6 6-6\"/></svg> 0.4 pts</span></div>\n  <div class=\"mn-stat\"><span class=\"mn-stat-label\">Active now</span><span class=\"mn-stat-value\">573</span><span class=\"mn-stat-delta\">+201 since last hour</span></div>\n</div>"
    }
  ],
  "css": ".mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }\n.mn-stat { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; min-width: 0; }\n.mn-stats > .mn-stat + .mn-stat { border-inline-start: var(--mn-border-w) solid var(--mn-border); }\n.mn-stat-label { font-size: var(--mn-text-sm); color: var(--mn-muted); display: flex; align-items: center; gap: .4rem; }\n.mn-stat-value { font: 700 1.75rem/1.1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }\n.mn-stat-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: calc(var(--mn-text-sm) - 1px); font-weight: 600; color: var(--mn-muted); }\n.mn-stat-delta svg { width: .95em; height: .95em; }\n.mn-stat-delta.mn-up { color: color-mix(in oklab, var(--mn-success-text) 86%, var(--mn-fg)); }\n.mn-stat-delta.mn-down { color: color-mix(in oklab, var(--mn-danger-text) 86%, var(--mn-fg)); }\n@media (max-width: 40rem) { .mn-stats > .mn-stat + .mn-stat { border-inline-start: 0; border-top: var(--mn-border-w) solid var(--mn-border); } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/stat.json"
  }
}