Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Comment Thread CRUD Block for React Aria

A review thread with replies where only your own comments change: Enter sends, edit in place with an edited word, a tombstone when a comment with replies is deleted, one pin and an Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people discuss a piece of work and fix their own words, with this thread for React with React Aria. Comments sit in a held frame two levels deep, a comment and its replies, with the composer at the foot: a Textarea where Enter sends and Shift+Enter breaks the line, and the one Shine Button. Reply opens a box under a comment. Only the comments you wrote show Edit and Delete: Edit works in place and leaves the word "edited", Delete on a comment with replies leaves "Comment deleted" with the replies where they were, and one without replies disappears; both leave "Deleted a comment" and an Undo in the foot. One comment can be pinned with a Toggle; it floats to the top with a Badge. Authors are initials in an Avatar. For review tools, feedback threads and any conversation that stays readable after something is deleted.

FAQ

How do I load my own thread?

Edit THREAD: a flat list where each remark has an id, an author, initials, an at ISO time, its text and a parent (empty for a comment, a comment's id for a reply). Comments written by "You" are the ones that can be changed; set ME to your signed-in user's name. Replies to replies are not drawn: the thread is two levels deep by design.

What is the tombstone, and why not delete the replies?

A comment with replies is kept as "Comment deleted" so the replies still make sense; its text is cleared and its pin, Edit and Delete go. A comment without replies is removed. Either way Undo restores the whole thread as it was, one step back.

How do Enter and Shift+Enter work?

In the composer, a reply box and an edit box, Enter sends or saves and Shift+Enter inserts a new line; Escape cancels a reply or an edit. An empty message is refused with the reason in a slot that is always there. Each box is limited to 200 characters, with a count.

How does pinning work?

One comment can be pinned at a time. Pinning another moves the pin and the foot says whose comment it left. A pinned comment floats to the top of the thread with the word Pinned; replies cannot be pinned.

What stays local, and how do I wire it for real?

Comments live in state in this tab and a reload brings the six shown back. Nobody is notified. In your app send the new comment, the edit and the delete to your API, return the saved record, and keep the tombstone rule on the server too.

Where does focus go after each action?

After sending a comment it moves to its Reply button; after a reply, to that reply's Delete button; Edit and Cancel return to the Edit button, Delete moves to Undo in the foot, and Undo goes back to the restored comment.

All 100 crud blocks