# Comment thread · MIAN

Nested comments with replies, times and reply / like actions.

- Id: `comment-thread` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/comment-thread
- Use for: comments, replies, discussion, nested comments.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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”).

## Examples

### Thread

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/comment-thread/source