shadcn.io is not affiliated with official shadcn/ui
Danger Zone Account Block for React Aria
An account danger zone with four action rows, a compare of deactivating against deleting that redraws a 30-day timeline, and a delete that asks for the account email typed in an alert dialog before it schedules the erasure.
Installation
Overview
Put the irreversible things in one place with this danger zone panel for React with React Aria. A compact header holds the title and one sentence, and a hairline frame with a plus mark on each corner holds four action rows: Deactivate, Transfer ownership, Clear trip data and Delete account. Under them a band asks Deactivate or delete? with two choice cards, and a four-step timeline redraws for the card you pick: deactivating hides the profile and keeps everything, deleting signs out at day 0, hides the profile at day 7, erases at day 30 and keeps billing records for seven years. Delete opens an Alert Dialog whose first sentence says what is lost and when, with a Field that wants the account email typed before the destructive button unlocks; focus starts on Cancel. Confirming schedules the erasure in the page and Undo walks it back. It is built from Alert Dialog, Field, Input, Button and Guides, with a CSS entrance only and no Shine Button, because its one strong action is the destructive confirm. For the account settings of any app that lets people leave.
FAQ
How do I wire it to a real account?
Edit EMAIL and the numbers in the dialog's sentence, then call your server in deactivate and confirm. The page keeps a phase (active, deactivated or scheduled) and a list of earlier phases for Undo; replace them with your account's real state. GRACE_DAYS is the wait before an erasure and the dates are worked out from it against AS_OF, a typed day, never the clock.
What does the delete confirmation ask for?
The account email, typed. Until it matches (ignoring case and outer spaces) the destructive button stays disabled and the field is marked invalid once something is typed. The dialog is modal, does not close on an outside click, and opens with focus on Cancel so a stray Enter never deletes. The destructive button uses the destructive variant with text mixed toward the foreground so it reads in both themes.
What stays local in the demo?
Everything. Deactivate, Reactivate, Delete and Undo change the page's state and say so in the one status line; Transfer ownership and Clear trip data only say that they are not connected here. Nothing is sent, so no email is typed into a real system. The sentence in the dialog is typed data, not a count of anything.
Why does the compare band exist?
People pick deletion when they only wanted a break. The two cards say in a line what each does, and the timeline below them redraws for the one you pick so the days are visible before you commit. Both timelines sit in one grid cell, the hidden one unseen, so choosing never moves the page.
Is it accessible?
The choice cards are real radio buttons in a fieldset with a hidden legend, so arrow keys and focus rings work; the timeline is an ordered list. The dialog traps focus and returns it to the Delete button, and the status line is a polite live region. On React Aria the alert dialog is opened with its trigger and focus on Cancel is set after it opens.