shadcn.io is not affiliated with official shadcn/ui
Account Deletion Grace Period Success Block for React
A 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.
Installation
Overview
Give people a clear way back after a deletion request with this confirmation page for React with Base UI. It's the page Pagemoth, a reading-list app, shows once an account is scheduled for deletion: the page's side rails and one band, with a single narrow column. A check in a tile, the heading, one sentence and a short list of what happened (the account, when it was switched off, the day it is gone for good), then the next 30 days as one bar cut at day 14: before the cut everything can still be restored, after it the data is being removed, each zone named under the bar with its dates. The one Shine Button, Cancel deletion, turns the page in place into Deletion cancelled, and a Download Trigger styled as an outline Button saves a small JSON file. The frame's lines are drawn by Guides. For account deletion, grace periods and any irreversible step that waits before it happens.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was deleted or cancelled. The account, the day and every date are typed or worked out from one constant, AS_OF, with RESTORE_DAYS and TOTAL_DAYS for the two zones, and Cancel deletion only changes this page (its status line says "Deletion cancelled in this demo. Nothing was changed."). To wire it, post to your cancel-deletion endpoint from cancel, then build the dates from the scheduled day your API returns and the retention policy it applies.
How is the 30-day bar built, and is it readable without sight?
It's drawn with CSS: a track with a solid stretch for the days you can still restore and a light stretch for the days the data is being removed, with a tick and a label under today, day 14 and day 30. The drawing is hidden from assistive technology on purpose, and the two zones under it carry the same facts in words with their dates, so nothing depends on the shades. The cut sits at RESTORE_DAYS / TOTAL_DAYS of the bar and the dates come from adding days to AS_OF in UTC, never from the clock.
What happens when I press Cancel deletion?
The page turns in place into Deletion cancelled: both states sit in one grid cell, so the page keeps its height and the centred heading doesn't move. Focus moves to the new heading, a polite status line says what happened and the primary becomes a link back into the app, with a quiet button to schedule the deletion again so the demo can be repeated. Both states are always in the page; the one that isn't showing is invisible and inert.
Does Download my data really work?
Yes, it uses what the browser offers. The Download Trigger builds a small JSON file from the typed reading lists and saves it as a sample, named so, and the status line says it holds no real data. In your app, build the file from the account's real export.
Where does Open Pagemoth go?
The primary in the cancelled state is a Shine Button used as a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.
How does it look on a phone?
The column keeps its order and the two buttons stack, the primary first and full width, pinned to the bottom of the screen so it stays in reach; from the small breakpoint up they sit side by side in the flow. The account row is left out on a phone to keep the page short, and the two zones stack under the bar.
Related
- 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.
- Pro
Delete Account Dialog
Destructive confirmsA notes app's settings page with its account deletion shown open: an alert dialog in three numbered steps, what goes with a real data download, the email typed exactly, then the password and a 14-day grace switch.
- Pro
Export requests as a lifecycle: a request checked with the password, a four-stage track that moves one stage per press, and a real sample file to download once it is ready.
- 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
Cancellation Runway Success
Plans and limitsA confirmation page for a cancelled subscription: a ring counting the days of paid access still ahead, the day access ends, the reason given quoted back, and a Reactivate button that turns the page in place.
- Pro
Account Setup Checklist Success
Account lifecycleA welcome page after sign-up: what happened, then a five-task setup checklist in an accordion where one task is open at a time, each with its own control, a count and a progress bar, and one primary that opens the app.