Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Error blocks

Pro

Removed Post Review Error Block for React

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.

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

Explain a removal and give the author a way back, with this removed-post page for React with Base 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.

Does the page change height when I request a review?

No. The field and its result share one space in the case, so the second band, and the whole page, keeps its height whether the form or the result shows. The hidden one is inert, so the keyboard and screen readers only reach what is visible.

How does it fit on a phone?

The case is the full width of the screen and its bands stack: the post, then the request, then the details. The Request a review button is on the first screen, and the case details come after it.

  • Pro

    Account Suspended Error

    Locked and removed

    A full-screen page for a suspended seller account: the reason, the day and a copyable reference, a Submit an appeal button that opens a Dialog with a note field, and a read-only Steps list that moves to Appeal sent.

  • Pro

    Comments Disabled Error

    Locked and removed

    A panel for an essay whose comments are closed: the article's footer drawn in greyscale and three cells of other ways to respond, namely reaction pills, a copyable link and a note to the author, plus a switch to hear if comments reopen.

  • Pro

    Archived Project Restore Error

    Locked and removed

    A page for an archived project: four cells for when and by whom it was archived, how many people worked on it and how many days it sat quiet, a retention meter with the months that remain, one button to restore it, a real archive download and a link to active projects.

  • Pro

    Role Ladder Permission Denied Error

    Locked and removed

    A full-screen permission page for a design-system manager: a role ladder of four rising steps with you at Viewer and Admin marked as needed, 'Two roles up' in words, and a Request access dialog that records a note and an owner in local state.

  • Pro

    Record Not Found Error

    Not found

    A split 404 page for an order desk: an inset frame that says what was asked for (the kind, the id and the result), and a lookup by kind and number over six typed records that finds the record or names the nearest number.

  • Pro

    403 Forbidden Error

    Locked and removed

    A full-screen 403 page for a team wiki: a door drawn as the zero of 403, the heading 'Ask someone who can say yes', the three workspace admins in a framed list with a Copy email button each, and a way back to the wiki.

All 100 error blocks