shadcn.io is not affiliated with official shadcn/ui
Reply Thread Reviews Block for React Aria
One three-star dishwasher review with its conversation in a single framed window: the seller's reply, the buyer's follow-up and the seller again under depth rails, and a real reply form with a live character count that appends your reply to the end.
Installation
Overview
A reply thread for React with React Aria, for the Jettyfield Quiet 12, a fictional dishwasher. Under a start-aligned header, one framed window with corner marks holds a three-star review (stars and their value in words, a title, the text, the reviewer with a "Verified purchase" mark and a fixed date) and the conversation under it: a reply from the seller with a Seller badge, the buyer's follow-up and the seller again, each indented under a depth rail that shrinks to a 2 px line on a phone. At the foot is a real form: a text box limited to 280 characters, a live count and the one Shine Button, "Post reply". A reply you post lands at the end of the thread marked as yours, the reply count moves, and a polite note says it stays on this page. The thread and its dates are typed at the top of the file. It uses Rating, Avatar, Badge, Field, Textarea, Shine Button and Guides.
FAQ
Where does my reply go?
Nowhere: it's kept in the page's state and shown at the end of the thread with "Just now" and a "You" name, and a polite note says "It stays on this page; nothing was sent". A reload starts afresh. To send replies for real, post the text from the submit handler and add the saved reply to the thread when your server answers. An empty or very short reply shows an error under the box, says it, and puts focus back in the field.
How does the character count work for screen readers?
The visible "0 / 280" is hidden from assistive technology so it isn't read on every keystroke. A separate polite status says "Twenty or fewer characters left" when 20 are left, "Ten or fewer" at 10 and "No characters left" at 0, and its text stays the same between those stages, so it's read once at each. The box has maxLength, so nothing can go past 280.
How is the depth shown?
Each reply is a list item with a 2 px rail at its start, indented one step further than the reply above (a smaller step on a phone, so the text keeps its width). The depth is typed in depth on each reply, 1 to 3, and the indent comes from literal classes in depthClass. The seller's replies carry a Seller badge and the buyer's a Reviewer badge, so the speaker is in words and not only the position.
What is the framed window?
One block with Guides corner marks and overshooting lines, split inside by solid rules with their own marks: the review, the conversation, then the composer. It's a frame in the section, not a card: it follows your theme and stays flat. The rules and marks come from the Guides component, so they match the lines of the other blocks.