build69
Sign inGet API key
build69  /  Components  /  Chat & Collab  /  CommentThread

CommentThread

v1.0.11Updated 27 Aug 2026

Threaded discussion component — nested replies, reactions, role badges, rich-text bodies and score/sort controls for internal comment feeds.

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedcommentsthreadredditdiscussion+6

The default, out-of-the-box CommentThread.

Recommended for+14
  • ✓Pulse discussion threads
  • ✓Casebook ticket conversations
  • ✓document review comments
  • ✓community/forum pages
Tags+6
commentsthreadredditdiscussionrepliesvotesmentionsreactionscommunitydefault
Features+4
  • Nested reply tree with Reddit-style collapse rails and collapsed summary rows
  • Up/down voting with optimistic local score and aria-pressed state
  • Inline reply + edit composers built on RichTextEditor; async submit with pending state
  • Sort by Best / Top / New / Old (pinned comments always first)
  • Pinned, [deleted] and [removed by moderator] states
  • Emoji reaction chips with reacted state, counts, and an add-reaction picker
  • @mention highlighting with onMentionClick (event-delegated, DOMPurify-sanitized bodies)
  • Load more replies (async spinner) and Continue-thread past maxDepth
  • Locked-thread banner that disables all composers
  • Own-comment Edit / Delete (Popconfirm) via a per-comment menu; Report for others
  • Read-only mode when currentUser is omitted
  • i18n: every built-in string overridable via the labels prop (CommentThreadLabels); relative/absolute timestamps and all counts follow LocaleProvider (Intl-driven, Buddhist-calendar aware, no bundled locale data)
Not recommended for−2
  • ✕Real-time chat (use Chat)
  • ✕Flat activity feeds (use Timeline)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "CommentThread" })

Usage

import { CommentThread } from '@build69/ui';

<CommentThread defaultComments={initialTree} currentUser={me} onReply={(parentId, html) => api.addComment(parentId, html)} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
comments

Controlled tree: id, author, body (HTML), createdAt, score, children, pinned, deleted, reactions, moreCount

CommentNode[]—
defaultComments

Uncontrolled mode: the thread manages its own tree; all mutations work with zero wiring

CommentNode[]—
reactionPreset

Emoji offered by the add-reaction picker

string[]—
currentUser

Enables composers and own-comment edit/delete; omit for read-only

CommentUser—
sort

Controlled sort (defaultSort for uncontrolled)

'best' | 'top' | 'new' | 'old'—
locked

Locked banner; disables replying

boolean—
maxDepth

Nesting depth before "Continue this thread" (default 6)

number—
onVote

Vote changes (0 = retracted)

(id, vote: 1 | 0 | -1) => void—
onReply

New comment; parentId null = top level

(parentId: string | null, html: string) => void | Promise<void>—
onEdit

Save an edited comment

(id, html) => void | Promise<void>—
onDelete

Confirmed via Popconfirm

(id) => void | Promise<void>—
onLoadMore

Fetch the moreCount replies of a node

(id) => void | Promise<void>—
onReact

Toggle a reaction chip

(id, emoji) => void—
onMentionClick

Click/Enter on an @mention

(username) => void—
labels

Override any built-in UI string (i18n); merged over English defaults (DEFAULT_COMMENT_THREAD_LABELS)

Partial<CommentThreadLabels>—

Related

Platform docsAll componentsSource files