shadcn.io is not affiliated with official shadcn/ui
Nested Threads Comments Block for Radix UI
A long forum argument you walk down: three levels of replies, Continue this thread to re-root the view under a breadcrumb, and a button that folds each branch.
Installation
Overview
Make a deep conversation readable, with this nested thread for React with Radix UI. A compact header sits over a hairline frame. Its first band is a breadcrumb trail ("Full thread", "Tomás's comment", ...) with a Back to full thread Button. Under it, a held scroll region shows the topic as a head and three levels of replies: the first plain, the second under a thin rail, the third indented without one. A reply at the third level that has answers ends in "Continue this thread", which re-roots the view at that comment: it becomes the new head, the breadcrumb grows by one step and focus moves to the head's heading. Every comment with answers has a button, "Hide 4 replies", that folds its whole branch, and hovering or focusing it tints that branch's rail. The count line says how many replies are on screen out of how many there are. A polite status line names each move. It is built from Button, Avatar, Badge and Guides, with a CSS entrance only. For forums, long review threads and any place where replies go deeper than a page can show.
FAQ
How do I fill it with my own thread?
Edit TOPIC, PEOPLE and REMARKS. A remark has an id, who wrote it (by), an ISO at, its body and the parent it answers (empty for a reply to the topic). Everything else is worked out from that list: the levels, the reply counts, the breadcrumb and the lines on screen. SHOWN_DEPTH sets how many levels show before "Continue this thread". Ages such as "3 h ago" come from AS_OF and the typed times, not from the clock.
What does Continue this thread do?
It changes which comment the view starts from. The chosen comment becomes the head above the replies, its own replies become the first level again, and the breadcrumb lists the way down, each earlier step a button that goes back to it. Focus lands on the new head so a keyboard or screen reader user starts reading at the top of the new view, and the region scrolls back to its top. Back to full thread returns to the topic from anywhere; at the top it says you are already there.
How does folding work, and does it move the page?
Each comment with replies has a button that reports whether its branch is open. Folding hides all the replies under it, at every depth, and the count line follows. The frame keeps one height with a scroll region, so folding or walking down never moves the page or the controls around it; only the rows inside the region move. Folds are kept as you walk, so a branch you closed stays closed when you come back.
What stays local?
Everything. This block has no composer: its job is navigation, and nothing is posted, saved or sent. To make it real, load the replies of a comment from your API when it is opened, so a very large thread fetches only the branch you walk into, and keep the view and the folded branches in the address so a link opens the same place.
Is it accessible?
The breadcrumb is a labelled navigation with the current step marked as the current page. The replies are one list per view, and the level of each is drawn by its rail and indent, with the text of every comment in reading order. The fold buttons report expanded or collapsed, and each Continue button says whose comment and how many replies. The region is a labelled scroll area you can reach with Tab. Hover and focus tint the rail with a darker line, which only adds to the state the button already states in words.