Three comment patterns — threaded replies, inline document comment and @mention composer — with collapsing threads, resolving highlights and a keyboard-driven mention list.
commentsthreadrepliesmentionscollaborationdocumentreviewdiscussion
Threaded replies
threaded.tsxReplies hang off a guide line, collapse with a spring, likes pop and new replies slide in.
$npx shadcn@latest add @geturui-pro/comment-threads-threaded
| 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
inline.tsxComment pinned to a highlight: click the quote to focus the thread, reply in place and resolve to fade it.
$npx shadcn@latest add @geturui-pro/comment-threads-inline
| 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
mentions.tsxTyping @ opens a filtered people list driven by the keyboard; posted comments highlight mentions.
$npx shadcn@latest add @geturui-pro/comment-threads-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. |
Install the whole set
Installs every comment threads variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
$npx shadcn@latest add @geturui-pro/comment-threads
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.