shadcn.io is not affiliated with official shadcn/ui
Account Deletion Grace Period Success Block for Ark UI
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 Ark 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 asChild around an a element.
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.