{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "review-summary",
  "name": "Review summary",
  "category": "Data display",
  "description": "An average rating with stars, the number of reviews and a distribution of 5 to 1 stars.",
  "tags": [
    "reviews",
    "rating",
    "stars",
    "rating summary",
    "feedback",
    "ecommerce",
    "product reviews",
    "score"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "reviews summary",
      "average rating",
      "rating distribution",
      "customer reviews"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/review-summary",
  "markdownUrl": "https://mian.ro/ai/components/review-summary.md",
  "classes": [
    {
      "name": "mn-stars",
      "description": "Stars filled to --_v (e.g. 94% for 4.7 of 5). Use anywhere, with role=\"img\" and a label."
    },
    {
      "name": "mn-reviews",
      "description": "The summary: mn-reviews-score and mn-reviews-bars."
    },
    {
      "name": "mn-reviews-bars",
      "description": "Distribution rows: label, a small progress bar, count."
    }
  ],
  "accessibility": [
    "Stars are an image: give them role=\"img\" and aria-label=\"4.7 out of 5 stars\".",
    "Each distribution bar has a label and count in text."
  ],
  "examples": [
    {
      "title": "Reviews",
      "description": null,
      "html": "<div class=\"mn-reviews\" style=\"max-width:36rem\">\n  <div class=\"mn-reviews-score\"><strong>4.7</strong><span class=\"mn-stars\" role=\"img\" aria-label=\"4.7 out of 5 stars\" style=\"--_v:94%\"></span><small>212 reviews</small></div>\n  <ul class=\"mn-reviews-bars\" aria-label=\"Rating distribution\">\n    <li><span>5 ★</span><div class=\"mn-progress mn-progress-sm mn-warning\" role=\"progressbar\" aria-label=\"5 stars\" aria-valuenow=\"79\" style=\"--_v:79.2%\"></div><span>168</span></li>\n    <li><span>4 ★</span><div class=\"mn-progress mn-progress-sm mn-warning\" role=\"progressbar\" aria-label=\"4 stars\" aria-valuenow=\"14\" style=\"--_v:14.2%\"></div><span>30</span></li>\n    <li><span>3 ★</span><div class=\"mn-progress mn-progress-sm mn-warning\" role=\"progressbar\" aria-label=\"3 stars\" aria-valuenow=\"4\" style=\"--_v:3.8%\"></div><span>8</span></li>\n    <li><span>2 ★</span><div class=\"mn-progress mn-progress-sm mn-warning\" role=\"progressbar\" aria-label=\"2 stars\" aria-valuenow=\"2\" style=\"--_v:1.9%\"></div><span>4</span></li>\n    <li><span>1 ★</span><div class=\"mn-progress mn-progress-sm mn-warning\" role=\"progressbar\" aria-label=\"1 stars\" aria-valuenow=\"1\" style=\"--_v:0.9%\"></div><span>2</span></li>\n  </ul>\n</div>"
    }
  ],
  "css": ".mn-stars { --_v: 100%; display: inline-block; width: 5.6em; height: 1.1em; vertical-align: -.15em; background: linear-gradient(90deg, var(--_c, var(--mn-warning)) var(--_v), color-mix(in oklab, var(--mn-fg) 18%, transparent) var(--_v));\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8Z'/%3E%3C/svg%3E\") 0 0 / 1.12em 1.1em repeat-x;\n  mask: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8Z'/%3E%3C/svg%3E\") 0 0 / 1.12em 1.1em repeat-x; }\n.mn-reviews { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; }\n.mn-reviews-score { display: grid; gap: .35rem; justify-items: start; }\n.mn-reviews-score > * { margin: 0; }\n.mn-reviews-score strong { font: var(--mn-heading-weight) 3rem/1 var(--mn-font-heading); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }\n.mn-reviews-score small { color: var(--mn-muted); font-size: .8125rem; }\n.mn-reviews-bars { flex: 1 1 15rem; display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }\n.mn-reviews-bars li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem; gap: .6rem; align-items: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }\n.mn-reviews-bars li > :last-child { color: var(--mn-muted); text-align: end; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/review-summary.json"
  }
}