Back to components
ComponentCollaborationFree
Threaded Replies React component
A contextual discussion thread with nested replies, reversible reactions, collapsible branches and resolve/reopen controls.
About the Threaded Replies component
A contextual discussion thread with nested replies, reversible reactions, collapsible branches and resolve/reopen controls.
When to use it
Keep review conversations connected to a decision.
Support nested replies and a clear resolved state.
Installation
Add the Threaded Replies component to your project with the shadcn CLI. It lands in components/threaded-replies.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/threaded-repliesOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<ThreadedReplies /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Workspace navigation" |
| theme | "dark" | "light" | "dark" |
| initialMessages | { id: string; parentId?: string; author: string; text: string; time: string; likes: number }[] | seed |
| onMessagesChange | (messages: ThreadMessage[]) => void | — |
| initialResolved | boolean | false |
| onResolvedChange | (resolved: boolean) => void | — |
| currentUser | string | "You" |
| className | string | — |
- titlestringDefault: "Workspace navigation"
- theme"dark" | "light"Default: "dark"
- initialMessages{ id: string; parentId?: string; author: string; text: string; time: string; likes: number }[]Default: seed
- onMessagesChange(messages: ThreadMessage[]) => void
- initialResolvedbooleanDefault: false
- onResolvedChange(resolved: boolean) => void
- currentUserstringDefault: "You"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Threaded Replies FAQ
- How do nested messages work?
- Each message optionally references a parentId. New replies attach to the selected message, or the first root message. Branches can be collapsed, reactions toggled and the thread resolved or reopened. Use onMessagesChange and onResolvedChange to persist updates.
- Is deletion authorized by the server?
- The local interface shows delete controls when the author matches currentUser. This is a frontend convenience, not authentication or authorization. Enforce permissions and user identity in your backend.
