Comment thread
Nested comments with replies, times and reply / like actions.
Thread
Jonas Olsen
“Decides once and every strand follows” is the best definition of a design token I have read.
Ilinca Sava
Stealing this for the book.
Lea Kim
Which counter was it? Asking for a lunch.
<ul class="mn-comments" style="max-width:34rem">
<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>
<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>
</li>
<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>
</ul>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/comment-thread.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-comments | A list of comments (<ul>); nest another inside a comment for replies. |
| mn-comment | 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”).