Comments Threaded

Fetch pattern JSON: curl https://webspire.de/patterns/comments/threaded.json

threaded.html

<section class="ws-comments" aria-label="Comments">
  <h2 class="text-lg font-semibold text-[var(--ws-comments-text)]">3 Comments</h2>
  <form class="mt-6" aria-label="Add a comment">
    <label for="threaded-comment-text" class="sr-only">Your comment</label>
    <textarea id="threaded-comment-text" rows="3" placeholder="Write a comment..." class="block w-full rounded-lg border border-[var(--ws-comments-border)] bg-[var(--ws-comments-bg)] px-4 py-3 text-sm text-[var(--ws-comments-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-comments-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-comments-action-bg)]"></textarea>
    <div class="mt-3 flex justify-end">
      <button type="submit" class="rounded-lg bg-[var(--ws-comments-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-comments-action-text)] transition hover:opacity-90">Submit</button>
    </div>
  </form>
  <div class="mt-8 space-y-6">
    <article class="flex gap-4">
      <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-700">AB</span>
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold text-[var(--ws-comments-text)]">Alice Brown</span>
          <time class="text-xs text-[var(--ws-comments-text-muted)]">2 hours ago</time>
        </div>
        <p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Great article! I found the section on responsive design particularly helpful.</p>
        <button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
        <div class="mt-4 space-y-4 border-l-2 border-[var(--ws-comments-border)] pl-6">
          <article class="flex gap-4">
            <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-rose-100 text-xs font-medium text-rose-700">GH</span>
            <div>
              <div class="flex items-center gap-2">
                <span class="text-sm font-semibold text-[var(--ws-comments-text)]">Grace Hill</span>
                <time class="text-xs text-[var(--ws-comments-text-muted)]">1 hour ago</time>
              </div>
              <p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Agreed! The container queries example was especially useful.</p>
              <button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
            </div>
          </article>
          <article class="flex gap-4">
            <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-medium text-indigo-700">AB</span>
            <div>
              <div class="flex items-center gap-2">
                <span class="text-sm font-semibold text-[var(--ws-comments-text)]">Alice Brown</span>
                <time class="text-xs text-[var(--ws-comments-text-muted)]">45 min ago</time>
              </div>
              <p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">@Grace Totally! I've started using them in production already.</p>
              <button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
            </div>
          </article>
        </div>
      </div>
    </article>
    <article class="flex gap-4">
      <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-sm font-medium text-emerald-700">CD</span>
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold text-[var(--ws-comments-text)]">Chris Davis</span>
          <time class="text-xs text-[var(--ws-comments-text-muted)]">5 hours ago</time>
        </div>
        <p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Would love to see a follow-up on accessibility best practices.</p>
        <button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
      </div>
    </article>
    <article class="flex gap-4">
      <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-100 text-sm font-medium text-amber-700">EF</span>
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="text-sm font-semibold text-[var(--ws-comments-text)]">Emma Foster</span>
          <time class="text-xs text-[var(--ws-comments-text-muted)]">1 day ago</time>
        </div>
        <p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Thanks for sharing this! Bookmarked for my next project.</p>
        <button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
      </div>
    </article>
  </div>
</section>

Details

Family

comments

Tier

enhanced

Kind

component

Extends

comments/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

commentsthreadednestedrepliesdiscussion

Slots

Name	Required	Description
heading	Yes	Comment count heading.
form	Yes	Comment input form with textarea and submit button.
comments	Yes	Comment list with nested reply threads.
replies	No	Indented reply threads under parent comments.

Threaded comment section extending the base with nested replies indented under parent comments. Uses a left border and padding for visual hierarchy in conversational threads.