shadcn.io is not affiliated with official shadcn/ui
Removed Post Review Error Block for Radix UI
A page for a removed forum post: the post with its words under black bars except the phrase that broke a rule, underlined and named, then a field and one button to request a review that shows what a real review would do, and the case details.
Installation
Overview
Explain a removal and give the author a way back, with this removed-post page for React with Radix UI. It's the page for a post taken down on Lanecrier, a neighbourhood forum: the page's two side rails run its full height, and one band crosses the screen between two rules with a plus mark where each meets a rail. The product's mark, the heading and one sentence sit over an inset Frame of three bands. The first holds the post as a moderator saw it, with its words under black bars from Redact Text except the one phrase that broke a rule, underlined and named (rule 3.2, Misleading offers). The second asks for a second look: a Textarea for why the removal was a mistake and the Shine Button that requests the review, the only colored control. The third is a Data List of the case: its id, when it was removed and who reviewed it. It's built from Frame, Redact Text, Data List, Textarea, Field, Button, Shine Button and Guides, with a CSS entrance only. For forums, marketplaces and any product that moderates what people post.
FAQ
What is under the black bars?
Typed filler, not a real post: the sentence is written in the file (BEFORE, FLAGGED and AFTER) so the page has something to show. A real page should never send the removed words to the browser at all: render bars sized to the original's length, or a placeholder, and send only what the person is allowed to read. Each word has its own bar, held on (revealed is false), so the bars wrap like the words they hide, and screen readers hear "redacted" for each hidden part.
How is the flagged phrase shown?
It is the one part of the post left visible, underlined and followed by the rule's number, with a line under the post that names the rule. It is marked by shape, not color, and it is in a mark element so assistive technology knows it is highlighted. Show only the phrase that broke the rule, never more of the post than that.
What does Request a review do, and what stays in the page?
It checks that you gave a reason of at least twelve characters, writes the problem under the field and moves focus to it if not, and otherwise waits a moment and shows "Review requested" in the same space, with focus on its heading and a polite status message saying nothing was sent. "Withdraw request" brings the field back with your words kept. To wire it for real, post the content id and the reason to your moderation queue where the code says so, keep the busy state until it answers, and keep the 48 hours only if your team will meet it.
What status should a removed post return?
410 Gone says the page was removed on purpose and is not coming back; 404 is fine when you don't want to say. The sentence here reads "Error 410" for that reason. Either way the block draws the page and your server sets the status.