Xzero UI
Pro library
ComponentsComment thread

Comment thread

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

$ pnpm dlx shadcn@4.23.0 add @xzero-ui/comment-thread
Live · keyboard ready

When to use

When not to use

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/comment-thread

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { CommentThread, type ThreadComment } from "@/components/xzero/comment-thread/comment-thread";

export function HeadlineDiscussion({ initial, me }: { initial: ThreadComment[]; me: { id: string; name: string; avatar?: string } }) {
  return (
    <CommentThread
      title="Hero headline"
      currentUser={me}
      defaultComments={initial}
      onCommentsChange={(_, event) => syncComment(event)}
      onResolvedChange={resolved => setThreadResolved("hero", resolved)}
    />
  );
}

API reference

CommentThread

A threaded discussion: nested replies that collapse, reactions with rolling counts, in-place edit and delete, @mention autocomplete, and resolving that folds the thread into a chip.

PropTypeDefaultDescription
commentsThreadComment[]–The comment tree (controlled).
defaultCommentsThreadComment[][]Initial tree when uncontrolled.
onCommentsChange(comments: ThreadComment[], event: CommentThreadEvent) => void–Called with the full next tree and what changed: reply, edit, delete, or react.
currentUser (required)CommentAuthor–The person writing. Their comments can be edited and deleted.
peopleCommentAuthor[]–People who can be mentioned. Defaults to everyone in the thread.
resolvedboolean–Resolved state (controlled).
defaultResolvedbooleanfalseInitial resolved state.
onResolvedChange(resolved: boolean) => void–Called on Resolve and Reopen.
titleReactNode–What the thread is about, shown in the header, such as "Hero headline".
reactionsstring[]["👍", "❤️", "🎉", "👀", "🚀", "✅"]Emoji offered by the reaction picker.
placeholderstring–Composer placeholder.
maxDepthnumber2Replies deeper than this attach to the deepest allowed parent.
nowLabelstring–createdAt label for comments written now.
labelsCommentThreadLabels–Words for localization, every visible word and accessible name: reply, edit, delete, cancel, send, save, resolve, resolved, reopen, empty, edited, deleteConfirm, deletedText, deletedComment, editComment, hideReplies, cancelReply, addReaction, closeReactions, reactions, mentions and thread. Words with a count or a name are functions: commentCount, peopleCount, showReplies, replyingTo, reactWith and reactionCount. Any key left out keeps its English default.
classNamestring–Extra class on the section.
refRef<HTMLElement>–The section element.

ThreadComment

One comment in the tree.

PropTypeDefaultDescription
id (required)string–Stable id.
author (required){ id: string; name: string; avatar?: string }–Author. Initials show without an avatar.
body (required)string–Plain text. "@Full Name" mentions of known people are highlighted.
createdAt (required)string–Display label such as "2h" or "Sep 18".
editedboolean–Shows an edited mark.
deletedboolean–A deleted comment with replies stays as a quiet placeholder.
reactions{ emoji: string; users: string[] }[]–Reactions and who gave them.
repliesThreadComment[]–Nested replies.

Keyboard interactions

KeysAction
⌘ + Enter / Ctrl + EnterSends the composer.
@Opens mention suggestions in the composer.
ArrowUp / ArrowDownMove through mention suggestions.
Enter / TabInsert the active mention.
EscapeCloses suggestions, then cancels an edit or reply; also closes the reaction picker or delete confirmation.

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Also in activity

Guidance for AI tools

Comment thread: Threaded comments with replies, reactions, mentions, inline edit, and resolve. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt

Browse all components