shadcn.io is not affiliated with official shadcn/ui
Account Deleted Error Block for React
A 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.
Installation
Overview
Say what each way forward costs, with this account deleted page for React with Base UI. It's the screen Cinderbox, a photo archive, shows someone who tried to sign in to an account that was deleted: 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. One frame on plus-marked corners, made with Guides, holds three facts on shared hairlines (the masked email, the day it was deleted, and the day it is kept until with the days left) and, under them, two native radio cells: Recover your account (the albums and teammates come back, the plan and username too, and deletion is cancelled) and Start fresh (nothing comes back, the email can be used again once the account is erased, the username is released). A tick marks what you keep and a dash what you lose, so no consequence relies on colour. The Shine Button is the only coloured control and its label follows the choice; pressing it says honestly that nothing was restored or created, and Undo puts both back. This is the person who tried to sign in, not the owner counting down a grace period. For any product that keeps deleted accounts for a while.
FAQ
What do the buttons do, and what stays in the page?
Nothing leaves the page. Pressing Recover my account or Start a new account shows a spinner for under a second, marks the chosen cell "Done in this demo" and a polite status line says that nothing was restored or created; focus moves to that line because the busy button drops it. Undo is always there, quiet until you have pressed, and clears the mark. To wire it for real, cancel the deletion or open the sign-up flow from confirm, and keep the dates on your server.
Where do the dates and the days left come from?
From the typed ACCOUNT constant (the deletion day and the day it is kept until) and one AS_OF day standing in for today. The "19 of 30 days remain" and the dates in the cells are worked out with UTC day numbers, so they read the same on the server and in every time zone, and nothing reads the clock. In your app, take the dates from the account's record and the date from the server.
Are the choice cells accessible?
Yes. The cells are native radio buttons in a labelled radio group: Tab reaches the group, the arrow keys move between the two cells, and choosing one is the same as clicking it. The chosen cell is a solid tint with a heavy edge and a filled dot, never colour alone. Each consequence is a list item that starts with the words "Kept" or "Lost" for a screen reader, as well as a tick or a dash.
What changes on a phone?
The facts and the cells stack, each cell shows its first two consequences (the third is still read by a screen reader), and the button is pinned to the foot of the screen so it stays in reach while you read. Its status line is read aloud there and shown on larger screens.
Why is the email masked?
Because this page is seen by anyone who can type the address. It shows the first letter and the domain only, so it never confirms a full address to someone else. In your app, mask the address on the server and keep the page's wording the same whether or not the account exists, if that matters for your users' privacy.
Related
- Pro
Account Suspended Error
Locked and removedA 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
Expired Link Error
Sign-in and identityA full-screen page for an expired password-reset link: the link's life drawn on a time axis, the facts in words, and an Email me a new link button that hands its place to a 30-second cooldown.
- Pro
Expired Invitation Error
Locked and removedA full-screen page for an expired team invitation: the invitation drawn as a pass in a card in a card with an Expired stamp, its code with a Copy button, and an Ask for a new invite button that honestly sends nothing.
- Pro
Record Not Found Error
Not foundA 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
Account Deletion Grace Period Success
Account lifecycleA confirmation page for a scheduled account deletion: what was switched off, a 30-day bar cut at day 14 into a restore zone and a removal zone, a Cancel deletion button that flips the page in place and a data download.
- Pro
Account Deletion Settings
Backups and exportsA whole-page account deletion that first asks what happens to each kind of data (delete, anonymise or transfer, with invoices locked for tax law), sums the choices in one sentence, then schedules deletion 14 days out behind a typed-email alert dialog.