## Comment Thread (S—170)

Threaded comments with collapsible replies, inline reply boxes that open under the comment, and like counts.

- URL: https://sundaeui.dev/components/comment-thread
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/comment-thread.json`
- Tags: thread, social, comments, replies, nested, discussion

Replies indent under a thin guide you can click to collapse the branch; collapsed branches show “3 replies”. Reply opens a small composer right under that comment.
Posting adds the reply with a slide-in and expands its branch. Likes toggle with a count.

### Usage

```tsx
import { CommentThread } from '@/components/sundae/comment-thread'

<CommentThread />
```

### Props

- `comments` (`Comment[]`, required): Tree: { id, author, text, ago, likes, replies? }.
- `onReply` (`(parentId: string, text: string) => void`): Called on post.
- `me` (`string`, default `'You'`): Current user name.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Docs, blog posts, design reviews, community threads.

### When not to use

- Real-time chat: use a message thread.

### Accessibility

- Each comment is an article; collapse buttons have aria-expanded and say how many replies they hide.
- The reply field is labelled with who you are replying to.
- Reduced motion removes the movement and keeps every state change.