# Comment Thread

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/comment-thread
```

## Import

```tsx
import { CommentThread } from "@/components/ui/comment-thread/comment-thread";
```

## Variants

- `discussion` — Forum discussion: `npx @lumioui/cli add pro/comment-thread-discussion`
- `post` — Post comments: `npx @lumioui/cli add pro/comment-thread-post`
- `qna` — Product Q&A: `npx @lumioui/cli add pro/comment-thread-qna`

## Props

### CommentThread

| Prop | Type | Notes |
| --- | --- | --- |
| `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 | Notes |
| --- | --- | --- |
| `comment` | `CommentNode` | — |
| `depth?` | `number` | Nesting depth (0 = top level). |

## Icons rendered

- `chevron-down` — /icons.html?i=chevron-down
- `message-circle` — /icons.html?i=message-circle
- `pin` — /icons.html?i=pin

Source: https://lumioui.com/components/comment-thread