Comment Thread React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Comment Thread is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CommentThread from @/components/ui/comment-thread.

"use client"

import { useState } from "react"
import { CommentThread, type CommentAuthor, type CommentData } from "@/components/ui/comment-thread"

const anna: CommentAuthor = { id: "anna", name: "Anna Price", avatar: "/demo/ana-pop.jpg" }
const michael: CommentAuthor = { id: "michael", name: "Michael Hayes", avatar: "/demo/mihai-ionescu.jpg", badge: "Author" }

export function QuoteDiscussion() {
  const [comments, setComments] = useState<CommentData[]>([
    {
      id: "c1",
      author: michael,
      body: "Sent the revised quote with 5% off the annual plan. @Anna Price can you take a look?",
      createdAt: "2026-09-24T14:05:00",
      reactions: [{ emoji: "👍", count: 3, reacted: false, users: ["Jessica Dunn", "Ryan Martin", "Liam Brooks"] }],
    },
  ])

  const send = async (body: string, { parentId }: { parentId?: string }) => {
    // await api.post("/quotes/Q-2026-118/comments", { body, parentId })
    const saved: CommentData = { id: crypto.randomUUID(), author: anna, body, createdAt: new Date() }
    setComments((list) =>
      parentId
        ? list.map((c) => (c.id === parentId ? { ...c, replies: [...(c.replies ?? []), saved] } : c))
        : [...list, saved],
    )
    return saved.id
  }

  return (
    <CommentThread
      comments={comments}
      currentUser={anna}
      people={[anna, michael]}
      onSubmit={send}
      onEdit={(id, body) => setComments((list) => list.map((c) => (c.id === id ? { ...c, body, editedAt: new Date() } : c)))}
      onDelete={(id) => setComments((list) => list.map((c) => (c.id === id ? { ...c, deleted: true } : c)))}
      labels={{ title: "Discussion", empty: "No comments yet" }}
      placeholder="Write a comment…"
    />
  )
}

Props

• commentsdefault "[]"
  CommentData[]

  { id, author: { id, name, avatar?, badge? }, body, createdAt, editedAt?, replies?, reactions?: { emoji, count, reacted, users? }[], attachments?, pending?, failed?, deleted? }. Bodies are plain text; replies nest one level (deeper ones are flattened with the @name in front).

• currentUser
  CommentAuthor

  You. Turns on the composer, Reply, reactions and the actions on your own comments. Without it the thread is read-only.

• peopledefault "[]"
  CommentAuthor[]

  Who can be mentioned: @Name in bodies becomes a chip (yours is highlighted) and the composer suggests them after @.

• reactionsdefault "["👍", "❤️", "😂", "🎉", "😮", "🙏"]"
  string[]

  The emoji row of the reaction picker.

• placeholderdefault "Write a comment…"
  string

  The empty composer's hint. Replies use labels.replyPlaceholder(name).

• variantdefault "plain"
  "plain" | "bubble"

  plain: flat comments with a thread line to the replies, like GitHub. bubble: the name and text in a bubble, your own bubbles tinted with the tone, time and actions underneath.

• sizedefault "md"
  "sm" | "md"

  Avatars 28 / 36px (replies 24 / 28px), text 13 / 14px. sm fits side panels.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Your own bubbles, your reactions, the send and save buttons.

• colordefault ""
  string

  Any CSS color; replaces the tone.

• timeFormatdefault "relative"
  "relative" | "time" | "date" | "datetime"

  "5 min. ago", "4:40 PM", "9/24/2026" or both. The full date is always in the tooltip.

• showHeaderdefault true
  boolean

  The title row with the count and the sort button.

• composerdefault "bottom"
  "bottom" | "top" | "none"

  Where the composer sits; top suits newest-first feeds. Needs currentUser and onSubmit.

• stickyComposerdefault false
  boolean

  The composer sticks to the edge of the scroll container on a glass background and pads the safe area, for chat-like pages on phones. Set --comment-thread-surface to the background behind it and --comment-thread-bleed to reach the container's edges.

• sortdefault "oldest"
  "oldest" | "newest"

  Order of the top-level comments; replies are always oldest first. The header button flips it (onSortChange).

• collapseRepliesAfterdefault 2
  number

  Shows the newest N replies and folds the older ones behind "Show N more replies".

• loadingdefault false
  boolean

  Skeleton comments with the real shape.

• skeletonCountdefault 3
  number

  How many skeleton comments show while loading.

• confirmDeletedefault true
  boolean

  Delete asks first in an alert dialog (a returned promise keeps it loading).

• sendOnEnterdefault false
  boolean

  Chat style: Enter sends and Shift+Enter adds a line (touch keyboards keep Enter for new lines and show a Send key). By default Enter adds a line and Cmd/Ctrl+Enter sends.

• localedefault ""
  string

  Locale for the times. Empty uses the UIProvider locale, then the browser's.

• onSubmit
  (body: string, context: { parentId?: string; mentions: string[] }) => (void | Promise<unknown>)

  A new comment or reply. The optimistic row shows at once; a promise keeps it "Sending…" and a rejection marks it failed with Retry. Resolve with the saved comment's id so the row stays in place when it arrives in comments.

• onEdit
  (id: string, body: string) => (void | Promise<unknown>)

  Saves an edit. A promise keeps Save loading; a rejection keeps the editor open with an error.

• onDelete
  (id: string) => (void | Promise<unknown>)

  Deletes a comment after the confirmation. Mark it deleted to keep the placeholder above its replies.

• onReact
  (id: string, emoji: string) => void

  Toggles the current user's reaction.

• onRetry
  (id: string) => void

  Retry on a comment you marked failed yourself. Optimistic comments from onSubmit retry on their own.

• onSortChange
  (sort: CommentThreadSort) => void

  The header sort button was pressed.

• canEdit
  (comment: CommentData) => boolean

  Default: your own comments (needs onEdit).

• canDelete
  (comment: CommentData) => boolean

  Default: your own comments (needs onDelete). Return true for moderators.

• getLink
  (comment: CommentData) => string

  What Copy link copies. Default: the page URL with #comment-<id> (every comment has that id).

• emptyState
  ReactNode

  Replaces the default <EmptyState size="sm" icon={<MessageSquare />} title={labels.empty} />.

• composerProps
  Partial<CommentComposerProps>

  Extra props for the main composer: attachments, maxLength, autoFocus, submitLabel.

• labels
  Partial<CommentThreadLabels>

  Every string, English by default (DEFAULT_COMMENT_THREAD_LABELS): title, reply, edit, delete, edited, save, cancel, send, sending, retry, discard, failed, deleted, showReplies(n), hideReplies, react, reactedBy(names, count), empty, deleteTitle, deleteConfirm, sortOldest, sortNewest, mention, actions, copyText, copyLink, newComment(name), replyPlaceholder(name)…

• classNames
  Partial<Record<CommentThreadSlot, string>>

  header, title, count, sort, list, comment, avatar, main, author, time, body, bubble, attachments, reactions, footer, replies, composer.

Parts

FAQ

Used in

More React data display components