# Comment threads

> Three comment patterns — threaded replies, inline document comment and @mention composer — with collapsing threads, resolving highlights and a keyboard-driven mention list.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/comment-threads
- Install: `npx shadcn@latest add @geturui-pro/comment-threads`
- Dependencies: motion, lucide-react

## Variants

### Threaded replies

Replies hang off a guide line, collapse with a spring, likes pop and new replies slide in.

Install: `npx shadcn@latest add @geturui-pro/comment-threads-threaded`

```tsx
import { CommentThread } from "@/components/examples/comment-threads/threaded";

export function Thread() {
  return <CommentThread root={root} replies={replies} me={{ name: "Sam Lee", initials: "SL" }} onReply={send} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| root / replies | `ThreadComment / ThreadComment[]` | — | { id, author, initials, time, text, likes, owner? }. |
| me | `{ name: string; initials: string }` | — | Author for new replies. |
| defaultCollapsed | `boolean` | false | Start with replies hidden. |
| onReply | `(text: string) => void` | — | Called when a reply is posted. |
| className | `string` | — | Extra classes on the card. |

### Inline comment

Comment pinned to a highlight: click the quote to focus the thread, reply in place and resolve to fade it.

Install: `npx shadcn@latest add @geturui-pro/comment-threads-inline`

```tsx
import { InlineDocComment } from "@/components/examples/comment-threads/inline";

export function DocComment() {
  return <InlineDocComment quote="Exports run instantly" notes={notes} onResolvedChange={(r) => save(r)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| docTitle / heading | `string` | — | Document caption and heading. |
| before / quote / after | `string` | — | Paragraph text around the highlighted quote. |
| notes | `{ author, initials, time, text }[]` | — | Comments on the highlight. |
| me | `{ name: string; initials: string }` | — | Author for new replies. |
| defaultResolved / onResolvedChange | `boolean / (resolved: boolean) => void` | — | Resolved state. |
| className | `string` | — | Extra classes on the card. |

### Mention composer

Typing @ opens a filtered people list driven by the keyboard; posted comments highlight mentions.

Install: `npx shadcn@latest add @geturui-pro/comment-threads-mentions`

```tsx
import { MentionComposer } from "@/components/examples/comment-threads/mentions";

export function Composer() {
  return <MentionComposer people={members} onPost={(text, mentions) => notify(mentions)} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title / placeholder | `string` | — | Heading and empty-state text. |
| people | `{ handle, name, initials, role }[]` | — | Who can be mentioned. |
| defaultComments | `PostedComment[]` | — | Existing comments above the composer. |
| me | `{ name: string; initials: string }` | — | Author for new comments. |
| onPost | `(text: string, mentions: string[]) => void` | — | Called with the handles that were mentioned. |
| className | `string` | — | Extra classes on the card. |

## Accessibility

- Reply toggles and likes expose aria-expanded and aria-pressed; composers have labels and Ctrl+Enter to send.
- The mention list is a combobox with listbox options driven by arrows, Enter, Tab and Escape.
- Reduced motion keeps the collapse, resolve and new-comment states but drops the slides and pops.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.