shadcn.io is not affiliated with official shadcn/ui
Downgrade Confirmation Billing Block for Ark UI
A downgrade that shows what it costs first: the limits that shrink, the folders now over the smaller plan's storage with a checkbox to archive each and a live meter, the day it takes effect, and an alert dialog that asks for a typed word.
Installation
Overview
Make leaving a plan an informed choice, with this downgrade confirmation for React with Ark UI. A hairline frame with a plus mark on each corner holds three bands. The first is a Data List of the plan change: from and to, the new price and the day it takes effect. The second sets two columns side by side: a list of what the account loses, each limit shown as before and after, and the folders that no longer fit, each with a Checkbox to archive it. A Progress meter in your foreground color recalculates the storage left after archiving, and says how much is still over or to spare. The last band holds a "Keep" link and the only primary button, which opens an Alert Dialog that asks for a typed word before anything is scheduled. Once scheduled the button reads "Downgrade scheduled", and a "Cancel downgrade" button undoes it. For SaaS storage and seat plans, admin consoles and account settings.
FAQ
How do I fill it from my billing provider?
Constants at the top of the file hold the data. ACCOUNT has the plan you're leaving (from), the plan you're moving to (to, with its limitGb) and the effective date as an ISO string, normally the end of the paid period. LIMITS lists each limit as a label with its before and after text, and FOLDERS lists what's stored: name, size in GB, when it was opened, and fixed for anything that can't be archived. The total, the archived size and what's over are all worked out from these.
What do the checkboxes and the meter do?
Each checkbox marks a folder to archive. The meter and the line under it add up the storage left after archiving against the new plan's limit: with nothing checked it says how far over you are, and once enough is archived it says how many gigabytes are to spare. Nothing is blocked either way; what stays over the limit becomes read-only, and the dialog says how many folders will be archived. Wire the archive choices into your downgrade request in confirm.
How does the typed confirmation work, and where does focus go?
The button opens an alert dialog, and focus lands in its field, labelled "Type downgrade to confirm". The Downgrade action stays disabled until the field reads the word, in any capitals. Escape or "Keep Pro" closes the dialog, focus returns to the button, and the field is empty the next time it opens. Confirming closes the dialog and the main button keeps focus, now reading "Downgrade scheduled" while it's dimmed and aria-disabled; "Cancel downgrade" appears beside it, and using it hands focus back to the main button.
How is the dialog wired on each library?
initialFocusEl on the dialog, and the trigger is the button wrapped in AlertDialogTrigger with asChild.The dialog is controlled with an open state on every library, so confirming closes it and marks the downgrade scheduled.What does a screen reader hear?
The section starts with an h2. Each limit is a list item whose before and after are joined by a hidden "becomes", and the arrows are decorative. The folders are a group named "Folders to archive", and each checkbox is named by its folder and size and described by when it was last opened, so a keyboard user can tick them with Space. The meter's numbers are in text under it, and the bar itself is hidden from assistive technology. A polite live region announces when the downgrade is scheduled.
How does it look on a phone?
The bands stack in one column: the plan change, what you lose, then the folders, with the two buttons at the bottom. The folder cards are compact, and the note about members is left out, so the main button is reached within about a screen and a half. In the dialog the two buttons stack.