shadcn.io is not affiliated with official shadcn/ui
Plan Downgrade Limits Success Block for Svelte
A confirmation page for moving from Pro to Free: what was scheduled, two cards with the workspace's three limits as bars (solid up to a cut mark, hatched beyond it) and an optional row of reason chips.
Installation
Overview
Show the cost of a smaller plan before it bites with this confirmation page for Svelte with Ark UI. It's the page Noteroost, a notes app, shows after a workspace is moved from Pro to Free: the page's side rails and one band, with a start-aligned column. A check in a tile, the heading, one sentence and a short list of what happened (the new plan, the last day on Pro, the days to go). Then two cards side by side, each framed by Guides, Pro until its last day and Free from the day it starts, each with three limits (members, storage, projects) drawn as bars on one scale: solid up to a cut mark and hatched beyond it where use is over the cap, with the words saying by how much or how much is to spare. A row of chips, a Toggle Group, asks why, optionally, and one Shine Button goes back to settings. For downgrades, lower tiers and any change where limits shrink.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was downgraded. The limits and use are typed in LIMITS, the two days in AS_OF and EFFECTIVE, and every figure on the page is worked out from them: the days to go, the amount over, the amount to spare and the number of limits that are over. Choosing a reason only changes this page and says so in a polite status line. To wire it, build LIMITS from your plan definitions and the workspace's real usage, and post the reason from pick.
How are the bars worked out, and are they readable without sight?
Each bar is on its own scale, the larger of use and the cap, so an overshoot still fits. The solid stretch is whatever fits under the cap, the hatched stretch is the part over it, and a mark at the cap separates them; a limit that fits shows a solid stretch only. The bars are a drawing, hidden from assistive technology: the line above each says "7 of 3" and the line below says "4 members over the limit" or "1 project to spare", so the words never depend on the shading.
How do the reason chips behave?
They are a single-choice Toggle Group that may be empty: pressing the chosen chip again clears it, and the status line says what was noted or that it was cleared. Arrow keys move between the chips and Space or Enter presses one. Nothing is sent: the choice is kept on this page only.
How does it look on a phone?
The Pro card folds into a sentence ("Everything fits: 7 of 25 members, 6.4 of 100 GB, 9 of 50 projects") so the Free card, where the difference is, comes first; the two actions share a row pinned to the bottom of the screen, and the status line is read out but not shown. From the small breakpoint up the Pro card shows its bars, and from the medium breakpoint the two cards sit side by side.