Comment Thread

Component 13

About

A threaded comment/review discussion component with replies, @mentions, emoji reactions, edit, resolve/reopen, delete, and optimistic sending that shows pending, sent, or failed with retry.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Comment Thread to your project and fits it to your theme.

Code

How Comment Thread is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import {
  CommentThread,
  type Comment,
  type CommentAuthor,
} from "@/components/ui/comment-thread";

const currentUser: CommentAuthor = { id: "you", name: "You", role: "Reviewer" };

const mentionable: CommentAuthor[] = [
  { id: "you", name: "You", role: "Reviewer" },
  { id: "mira", name: "Mira Delacroix", role: "Product" },
  { id: "devon", name: "Devon Achebe", role: "Design" },
  { id: "kai", name: "Kai Ferreira", role: "Engineering" },
];

const initialComments: Comment[] = [
  {
    id: "c1",
    author: mentionable[1],
    body: "Launch review for Aurora 2.0 is open. Flagging the hero banner and the pricing table \u2014 @Devon can you take the visuals?",
    createdAt: Date.now() - 1000 * 60 * 42,
    mentions: ["devon"],
    reactions: [
      { emoji: "\ud83d\ude80", count: 3, reactedByMe: false, label: "rocket" },
      { emoji: "\ud83d\udc40", count: 1, reactedByMe: true, label: "eyes" },
    ],
    replies: [
      {
        id: "c2",
        parentId: "c1",
        author: mentionable[2],
        body: "On it. The hero contrast passes AA now, but the CTA still feels light against the gradient.",
        createdAt: Date.now() - 1000 * 60 * 30,
        editedAt: Date.now() - 1000 * 60 * 28,
        reactions: [
          {
            emoji: "\ud83d\udc4d",
            count: 2,
            reactedByMe: false,
            label: "thumbs up",
          },
        ],
      },
      {
        id: "c3",
        parentId: "c1",
        author: mentionable[3],
        body: "Deploy of the pricing table is green on staging. @You mind a final pass before we tag the release?",
        createdAt: Date.now() - 1000 * 60 * 12,
        mentions: ["you"],
      },
    ],
  },
];

export default function CommentThreadDemo() {
  const [comments, setComments] = React.useState<Comment[]>(initialComments);

  return (
    <div className="flex w-full items-center justify-center bg-[var(--color-bg)] p-6">
      <div className="w-full max-w-lg">
        <CommentThread
          label="Review discussion"
          comments={comments}
          currentUser={currentUser}
          mentionable={mentionable}
          unreadAfter={Date.now() - 1000 * 60 * 20}
          onAddComment={async (draft) => {
            const comment: Comment = {
              id: draft.tempId,
              author: currentUser,
              body: draft.body,
              createdAt: Date.now(),
              mentions: draft.mentions,
            };
            setComments((prev) => [...prev, comment]);
            return comment;
          }}
          onReply={async (draft) => {
            const reply: Comment = {
              id: draft.tempId,
              parentId: draft.parentId,
              author: currentUser,
              body: draft.body,
              createdAt: Date.now(),
              mentions: draft.mentions,
            };
            setComments((prev) => [...prev, reply]);
            return reply;
          }}
          onResolve={() => {}}
          onReopen={() => {}}
          onReact={() => {}}
        />
      </div>
    </div>
  );
}