{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "comment-thread",
  "name": "Comment thread",
  "category": "Data display",
  "description": "Nested comments with replies, times and reply / like actions.",
  "tags": [
    "comments",
    "thread",
    "replies",
    "discussion",
    "conversation",
    "forum",
    "nested",
    "social"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "comments",
      "replies",
      "discussion",
      "nested comments"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/comment-thread",
  "markdownUrl": "https://mian.ro/ai/components/comment-thread.md",
  "classes": [
    {
      "name": "mn-comments",
      "description": "A list of comments (<ul>); nest another inside a comment for replies."
    },
    {
      "name": "mn-comment",
      "description": "A comment: avatar, mn-comment-head, mn-comment-body, mn-comment-actions."
    }
  ],
  "accessibility": [
    "Nested lists convey who replied to whom; each comment starts with the author’s name.",
    "Put times in <time> and give action buttons names that include the author (“Reply to Jonas”)."
  ],
  "examples": [
    {
      "title": "Thread",
      "description": null,
      "html": "<ul class=\"mn-comments\" style=\"max-width:34rem\">\n  <li class=\"mn-comment\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">JO</span><p class=\"mn-comment-head\"><strong>Jonas Olsen</strong><time datetime=\"2026-09-25T09:02\">1 h</time></p><p class=\"mn-comment-body\">“Decides once and every strand follows” is the best definition of a design token I have read.</p><div class=\"mn-comment-actions\"><button type=\"button\" aria-label=\"Reply to Jonas Olsen\">Reply</button><button type=\"button\">Like · 9</button></div>\n    <ul class=\"mn-comments\"><li class=\"mn-comment\"><span class=\"mn-avatar mn-avatar-sm mn-primary\" aria-hidden=\"true\">IS</span><p class=\"mn-comment-head\"><strong>Ilinca Sava</strong><time datetime=\"2026-09-25T09:20\">48 min</time></p><p class=\"mn-comment-body\">Stealing this for the book.</p><div class=\"mn-comment-actions\"><button type=\"button\" aria-label=\"Reply to Ilinca Sava\">Reply</button><button type=\"button\">Like · 3</button></div></li></ul>\n  </li>\n  <li class=\"mn-comment\"><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">LK</span><p class=\"mn-comment-head\"><strong>Lea Kim</strong><time datetime=\"2026-09-25T09:31\">37 min</time></p><p class=\"mn-comment-body\">Which counter was it? Asking for a lunch.</p><div class=\"mn-comment-actions\"><button type=\"button\" aria-label=\"Reply to Lea Kim\">Reply</button><button type=\"button\">Like · 1</button></div></li>\n</ul>"
    }
  ],
  "css": ".mn-comments { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }\n.mn-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; }\n.mn-comment > .mn-avatar { grid-row: span 4; }\n.mn-comment > :not(.mn-avatar) { grid-column: 2; min-width: 0; margin: 0; }\n.mn-comment-head { font-size: var(--mn-text-sm); }\n.mn-comment-head strong { font-weight: 600; margin-inline-end: .35rem; }\n.mn-comment-head time { color: var(--mn-muted); }\n.mn-comment-body { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }\n.mn-comment-actions { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .8125rem; }\n.mn-comment-actions button { padding: .2rem 0; border: 0; background: none; color: var(--mn-muted); font: 500 .8125rem/1.2 var(--mn-font); cursor: pointer; }\n.mn-comment-actions button:hover { color: var(--mn-fg); }\n.mn-comment > .mn-comments { margin-top: .9rem !important; padding-inline-start: 1rem; border-inline-start: 2px solid var(--mn-border); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/comment-thread.json"
  }
}