Comment Thread

Component

About

A nested comment/reply thread that recursively renders replies with indentation up to a configurable max depth.

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

import CommentThread, {
  type CommentNode,
} from "@/components/ui/comment-thread";

const comments: CommentNode[] = [
  {
    id: "1",
    author: "ava.chen",
    initials: "AC",
    time: "2h ago",
    body: "This recursive indentation approach is really clean — much easier to follow than a flat list with avatars stacked at the same depth.",
    children: [
      {
        id: "1-1",
        author: "liam.rossi",
        initials: "LR",
        time: "1h ago",
        body: "Agreed. I'd just cap the max depth so long arguments don't push the text off-screen.",
        children: [
          {
            id: "1-1-1",
            author: "ava.chen",
            initials: "AC",
            time: "45m ago",
            body: "That's exactly what maxDepth does here — anything past it just stops rendering.",
          },
        ],
      },
    ],
  },
  {
    id: "2",
    author: "noah.park",
    initials: "NP",
    time: "3h ago",
    body: "Does this support editing or deleting a reply inline, or is it read-only by design?",
    children: [
      {
        id: "2-1",
        author: "sofia.kim",
        initials: "SK",
        time: "2h ago",
        body: "It's read-only — you'd wire up actions around the CommentNode data yourself.",
      },
    ],
  },
];

export default function CommentThreadDemo() {
  return (
    <div className="w-full max-w-lg mx-auto p-6 rounded-lg border border-border bg-card text-card-foreground">
      <h3 className="text-sm font-medium mb-4 text-foreground">Discussion</h3>
      <CommentThread comments={comments} maxDepth={3} />
    </div>
  );
}