Comment thread

Threaded comments with replies, reactions, mentions, inline edit, and resolve.

$npx shadcn@latest add @silicon-ui/comment-thread

datanew

Installation

$npx shadcn@latest add @silicon-ui/comment-thread

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/comment-thread/comment-thread.tsx
- components/silicon-ui/comment-thread/comment-thread.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { CommentThread } from "@/components/silicon-ui/comment-thread/comment-thread";

Prop	Type	Default
`currentUser*` The person writing. Their comments can be edited and deleted.	`CommentAuthor`	—
`comments`	`ThreadComment[]`	—
`defaultComments`	`ThreadComment[]`	`[]`
`onCommentsChange`	`(comments: ThreadComment[], event: CommentThreadEvent) => void`	—
`people` People who can be mentioned. Defaults to everyone in the thread.	`CommentAuthor[]`	—
`resolved`	`boolean`	—
`defaultResolved`	`boolean`	`false`
`onResolvedChange`	`(resolved: boolean) => void`	—
`title` What the thread is about, shown in its header, such as "Hero headline".	`ReactNode`	—
`reactions` Emoji offered by the reaction picker.	`string[]`	`DEFAULT_REACTIONS`
`placeholder`	`string`	`"Reply, or @mention someone"`
`maxDepth` Replies deeper than this attach to the deepest allowed parent. Defaults to 2.	`number`	`2`
`nowLabel` Label for comments written now.	`string`	`"Just now"`
`labels` Words for localization. Leave out any key to keep its English default.	`CommentThreadLabels`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.