shadcn.io is not affiliated with official shadcn/ui
Account Suspended Error Block for React
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.
Installation
Overview
Give a suspended seller a way to be heard, with this account suspended page for React with Base UI. It's the screen Stallworks, a marketplace for independent sellers, shows when an account is suspended: 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, and the screen splits in two on a large display. At the start are the heading, one sentence, three ruled facts (the reason, the day, and a reference with a Copy Button that really copies it) and the only coloured control, a Shine Button, Submit an appeal. It opens a real Dialog with a note field that is checked when you send. At the end, a tick or a dash says what the suspension means, and the appeal path is a read-only vertical Steps list (Suspended, Appeal sent, In review, Decision) standing at the first step. Sending an appeal moves the list to Appeal sent, writes a receipt with the decision day counted three business days on, and turns the button quiet; Withdraw puts it all back. Nothing is sent. For marketplaces, platforms and any account that can be paused.
FAQ
What does Send appeal do, and what stays in the page?
Nothing leaves the page. A note under twenty characters gets a line under the field and focus stays there; a good one closes the Dialog, moves focus back to the button, moves the Steps list to Appeal sent and writes the receipt under it. The button turns quiet and says Appeal sent, and pressing it then says the appeal is already in. Withdraw (always there, quiet until an appeal is in) puts everything back. To wire it for real, file the appeal from send and show the receipt from the response.
Where do the dates come from?
The suspension day, the reference and the length of a review are typed constants at the top of the file, and one AS_OF day stands in for today. The decision day is worked out as three business days after it (weekends skipped, in UTC), so it reads the same on the server and in every time zone, and nothing reads the clock. In your app, use the real dates and your own review time.
Is the Steps list a form of navigation?
No. It is a read-only list that shows where an appeal goes: it takes no clicks and no keys. It changes with the page's state, never with a press on a step. On a phone the step descriptions are read aloud but not shown, to keep the button on the first screen.
How does the Dialog behave?
It is the catalog Dialog: it traps focus while open, Escape and Cancel close it without sending, and focus returns to Submit an appeal. The note field has a visible label, a line for its problem that is always given room, and the typed length is limited. The Dialog says plainly that nothing is sent from this demo.
Why does the page not promise a result?
Because no page can. It says when a decision is expected, never that the suspension will be lifted, and it keeps the reason in plain words so the seller knows what to answer. Words like "We will review within 48 hours" are only safe when a real queue backs them up, so the review time is a constant you set.
Related
- Pro
Account Deleted Error
Locked and removedA full-screen page for someone who signs in to a deleted account: three facts on shared hairlines and two choice cells that spell out what recovering and starting fresh each mean, with a Shine Button that follows the choice.
- Pro
Removed Post Review Error
Locked and removedA 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.
- Pro
IP Address Blocked Error
Blocked and limitedA full-screen blocked-address page for a bot-protection layer: a review request form (organisation and reason) beside the evidence: the address with Copy, a five-part bar for 5 of 5 failed sign-ins in 10 minutes, the five attempts and when the block lifts.
- Pro
Role Ladder Permission Denied Error
Locked and removedA 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.
- 43Pro
403 Forbidden Error
Locked and removedA 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.
- Pro
Account Locked Login
Recovery and resetA locked-account page for a point-of-sale system that draws the lockout ladder, marks the rung the account is on with a fixed unlock time, and offers an unlock link by email or a password reset.