shadcn.io is not affiliated with official shadcn/ui
Account Deletion Settings Block for React Aria
A 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.
Installation
Overview
Make leaving a product a decision about data, not just a button, with this account deletion page for React with React Aria. It is a whole screen: the product's mark, a heading and a sentence, then a native table of four kinds of data (budgets, notes, receipts and invoices), each with a Native Select of what can happen to it: delete it, anonymise it or transfer it to a household member. Invoices have no menu, only their rule: Kept for tax law, 7 years. One sentence adds the choices up: Jarwick will transfer 14 budgets to Annelise Yoon, anonymise 212 notes, delete 312 receipts, and keep 9 invoices for 7 years. The one Shine Button, Schedule deletion, opens an Alert Dialog with focus on Cancel that repeats the sentence and asks for the account's email, typed exactly, and its action is the destructive Button. Confirming schedules the deletion 14 days out: the menus turn into words, the sentence under the heading gives the day, and the same button reads Cancel deletion. On a phone each kind is a card and the button stays pinned to the bottom. It's built from Native Select, Alert Dialog, Input, Button, Shine Button and Guides, with a CSS entrance only. For any product that keeps people's data.
FAQ
How do I fill it with my own data types?
Edit KINDS: each kind has a name, a noun, a count, the fates its menu offers (delete, anonymise, or transfer- followed by a member's id) and, for a kind that can't be chosen, the words for its rule in keep. HEIRS lists the people data can be handed to, START is what is chosen when the page opens and GRACE_DAYS is the wait. The sentence is built from those lists, and the deletion day from AS_OF, a fixed day, so the page reads the same every time.
What does the alert dialog ask for?
The account's email, typed exactly, capitals included. The destructive button waits quietly until it matches; pressed early it says Type the email exactly as shown and moves focus to the field. Cancel has focus when the dialog opens, Escape and an outside click behave as in any alert dialog (Escape closes it, an outside click doesn't), and Keep my account leaves everything as it was. The dialog repeats the one-sentence summary so the last look at what goes is in front of the confirmation.
What changes once it is scheduled?
The menus become plain words (so nobody edits choices that are already queued), the sentence under the heading gives the day, and the Shine Button's place is taken by Cancel deletion, which puts everything back as it was. The page keeps its height, and focus moves to the new button a moment after the dialog closes. A real product would keep the account working until that day and email a reminder; this demo has no clock.
What stays local, and how do I make it real?
Everything. Nothing is deleted, anonymised, transferred or emailed, and the page says so. To make it real, send choices from schedule to your server, let it hold the 14 days and run the work at the end, and keep the rules there: invoices are kept whatever the page says, and a transfer needs the other person's acceptance.
How does it work with a keyboard and a screen reader?
Tab runs through each kind's menu (named for its data, for example What happens to your budgets), then the one button and the link out. The table has a caption and row headers; on a phone the same facts are a list. The confirmation is an alert dialog with focus on Cancel, and a polite line under the field says whether the email matches. A status line announces the scheduled or cancelled result.