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.
"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>
);
}
Part of Motiq — browse the full library on 21st.dev.