CommentThread

CommentThread, CommentItem, and CommentComposer cover discussion surfaces in product UIs — release reviews, audit conversations, embedded feedback. The visual tone is closer to a settings page than a social feed.

#Default usage

<CommentThread label="Review feedback">
  <CommentItem
    author="Wandi"
    avatar={<Avatar><AvatarFallback>W</AvatarFallback></Avatar>}
    timestamp="2 hours ago"
    body="Looks good. Let's tighten the empty state copy before merging."
  />
  <CommentItem
    author="Reviewer"
    avatar={<Avatar><AvatarFallback>R</AvatarFallback></Avatar>}
    timestamp="just now"
    body="Done — see latest commit."
    edited
  />
  <CommentComposer />
</CommentThread>

#Import

import {
  CommentThread,
  CommentItem,
  CommentComposer,
} from "@froggdesign/enter-ui-react";

#Patterns

Pass replies to CommentItem to render a nested column of CommentItems. Pass attachments for file lists or media thumbnails. The composer is a <form> with a textarea, optional toolbar slot, and a submit button — empty submissions are blocked.

<CommentItem
  author="Author"
  body="Initial review"
  replies={
    <>
      <CommentItem author="Reply" body="Agreed." timestamp="1m" />
    </>
  }
  attachments={<AttachmentList items={files} />}
/>

<CommentComposer
  loading={posting}
  error={postError}
  attachments={<AttachmentList items={pendingFiles} />}
  toolbar={<IconButton aria-label="Attach"><Paperclip /></IconButton>}
  onSubmit={async (value) => post(value)}
/>

#States

Use status for optimistic UI, drafts, and failed sends. Status copy is intentionally quiet so the thread stays suitable for admin and review surfaces.

<CommentItem author="Release bot" body="Publishing package..." status="sending" />
<CommentItem author="Reviewer" body="Needs one more check." status="failed" />

#Accessibility

• CommentThread renders a <section> with the supplied label so AT can navigate the discussion as a region.
• Each CommentItem renders an <article> with a header.
• CommentComposer ties the textarea to aria-describedby for the error message and announces busy state via aria-busy.

#API

• <CommentThread label /> — region wrapper.
• <CommentItem author avatar body timestamp actions attachments replies status edited />.
• <CommentComposer value defaultValue onValueChange onSubmit submitLabel placeholder loading disabled error avatar toolbar attachments maxLength ariaLabel />.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.