shadcn.io is not affiliated with official shadcn/ui
Comment Thread Blog Block for React Aria
A blog comment thread on hairline rows: top-level comments with initials avatars and fixed dates, replies in a Collapsible, and a form with an empty-submit check that adds your comment to the thread.
Installation
Overview
A comment thread for React with React Aria, written for the comments under a Loamline post, a gardening blog. A start-aligned header with a live count sits over a thread on hairline rows that runs from rail to rail: top-level comments with an initials avatar, the name and a fixed date, and replies in a Collapsible ("Hide 2 replies") indented on a hairline that follows the reply. A band at the end holds the form: a Textarea and a Post comment button that appends your comment to the end of the thread, marked "You". It checks an empty or too-short comment and says so in an error line that is always in the layout, so the button never moves. Nothing is posted in this demo: your comment lives in the page and is gone on reload. It is built from Guides, Avatar, Collapsible, Textarea and a Shine Button. For post comments, discussion threads and guestbooks.
FAQ
Where does my comment go?
Nowhere: it is added to the page's own state, shown with the name "You" and "Just now" in place of a date, and gone when the page reloads. The status line under the form says so each time. To make it real, send text to your API in the post handler and add the saved comment to comments when the request succeeds.
What does the form check?
Two things: an empty comment ("Write a comment before you post it.") and one shorter than eight characters ("Too short: write at least 8 characters."). The check runs when you press Post comment, not on every keystroke, and the error line sits in the layout from the start (role="alert", a reserved height), so the form does not jump. The field is marked aria-invalid and keeps focus. Change MIN_LENGTH to tune the limit; the field also stops at 600 characters.
How do the replies fold?
Each comment with replies holds one Collapsible, open by default. Its trigger names the action and the count ("Hide 2 replies", then "Show 2 replies") and the chevron turns. While folded the replies are inert, so the keyboard skips them. Replies are one level deep, which keeps a thread readable on a phone; the indent is smaller there.