shadcn.io is not affiliated with official shadcn/ui
Account Suspended Error Block for React Aria
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 React Aria. 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.