A nested comment thread with reply threading, emoji reactions, inline edit/delete, @mention autocomplete, and a resolve/reopen toggle for review-style discussions.
import CommentThread, {
type ThreadComment,
} from "@/components/ui/comment-thread";
import { useState } from "react";
const currentUser = { id: "u-1", name: "Alex Rivera" };
const people = [
currentUser,
{ id: "u-2", name: "Priya Shah" },
{ id: "u-3", name: "Marco Dias" },
];
const initialComments: ThreadComment[] = [
{
id: "c-1",
author: { id: "u-2", name: "Priya Shah" },
body: "Can we tighten up the spacing between the hero title and the subhead? Feels a bit loose on mobile.",
createdAt: "2h",
reactions: [{ emoji: "👍", users: ["u-1", "u-3"] }],
replies: [
{
id: "c-2",
author: { id: "u-1", name: "Alex Rivera" },
body: "@Priya Shah good catch, I'll drop the gap to 12px and ship a fix.",
createdAt: "1h",
},
],
},
{
id: "c-3",
author: { id: "u-3", name: "Marco Dias" },
body: "Loving the new empty state illustration, nice work team.",
createdAt: "45m",
reactions: [{ emoji: "🎉", users: ["u-2"] }],
},
];
export default function CommentThreadDemo() {
const [comments, setComments] = useState<ThreadComment[]>(initialComments);
const [resolved, setResolved] = useState(false);
return (
<div className="w-full max-w-xl p-6">
<CommentThread
title="Hero section feedback"
currentUser={currentUser}
people={people}
comments={comments}
onCommentsChange={setComments}
resolved={resolved}
onResolvedChange={setResolved}
/>
</div>
);
}