Comment Thread
Threaded comments with collapsible replies, inline reply boxes that open under the comment, and like counts.
comment-thread.tsxcomment-thread.css
Checking access…
Overview
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.
When to use
- Docs, blog posts, design reviews, community threads.
When not to use
- Real-time chat: use a message thread.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/comment-thread.json$
npx shadcn@latest add https://sundaeui.dev/r/comment-thread.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/comment-thread.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/comment-thread.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy comment-thread.tsx and comment-thread.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { CommentThread } from '@/components/sundae/comment-thread'
<CommentThread />Props
| Prop | Type | Default |
|---|---|---|
comments*Tree: { id, author, text, ago, likes, replies? }. | Comment[] | — |
onReplyCalled on post. | (parentId: string, text: string) => void | — |
meCurrent user name. | string | 'You' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-cmt; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Comment Thread free?
- Comment Thread is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Comment Thread?
- Run npx shadcn@latest add https://sundaeui.dev/r/comment-thread.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Comment Thread support keyboard and screen readers?
- 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.
- Does Comment Thread respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Follow Button
Components · RefinedVote Arrows
Components · RefinedPoll Card
Components · RefinedMessage Thread
Components · RefinedShare Sheet
Components · RefinedToast Stack
Components · Refined