Comment Thread

Pro

Nested comment thread with likes, replies and collapsible branches. A new comment can open into place with a brief highlight, and folding a branch tucks away all of its replies at once.

Preview

Installation

npx @lumioui/cli add pro/comment-thread

Usage

import { CommentThread } from "@/components/ui/comment-thread/comment-thread";
<CommentThread />

Examples

Forum discussion

A forum thread, orange accent.

Post comments

Comments under a home-renovation photo post, flat layout, ink.

Product Q&A

Customer questions on an outdoor-gear product page, green accent.

API reference

CommentThread

Prop Type Default
comments* CommentNode[] —
variant "threaded" | "flat"

threaded — nested rails, collapsible subtrees (forums). flat — one reply level with "View more replies" (photo feeds). Default "threaded".

 —
maxDepth number

Deepest visual nesting for threaded; deeper replies stop indenting. Default 4.

 —
collapsed string[]

Controlled collapsed ids (threaded) / expanded reply lists (flat).

 —
defaultCollapsed string[]

Uncontrolled initial collapsed ids.

 —
onCollapsedChange (ids: string[]) => void —
initialReplies number

Flat: replies shown before "View N more replies". Default 1.

 —
onLikeChange (id: string, liked: boolean) => void

Fires when the viewer likes or un-likes a comment.

 —
onReply (comment: CommentNode) => void

Reply tapped — focus your composer with this comment as the target.

 —
highlightId string

A comment that was just posted — its slot opens and it switches on, sheen, hold.

 —
onArrivalLayout (rect: LayoutRectangle) => void

Where the arriving highlightId comment sits on screen (window coords), so a composer can fly its draft into the slot.

 —
className string —

Comment

Prop Type Default
comment* CommentNode —
depth number

Nesting depth (0 = top level).

 —