shadcn.io is not affiliated with official shadcn/ui
Upgrade Meter Footer Block for Ark UI
A slim footer for cloud storage with a plan band: the plan name, the space used and free, a thin meter, the share as a number and an Upgrade button, over a row of links and a legal band.
Installation
Overview
A footer for React with Ark UI that shows where the account stands. The first band reads "Starter plan, 8.2 of 10 GB used, 1.8 GB free", draws a thin meter filled in the foreground tone, writes the share as a number (82%) and ends on the Shine Button "Upgrade". Under it, a band holds the wordmark with one sentence and the links in one row, in a nav labelled Footer, and a legal band closes the page. The two numbers are constants at the top of the file; the share, the space free and the meter's accessible name are all worked out from them, so they cannot disagree. On a phone the plan band stacks (text, meter with its number, button) and the links wrap.
FAQ
How do I show real usage?
Set PLAN (its name, limit and used amount, in gigabytes) from your account data when the footer renders. The share, the space free and the meter's label are derived from it. Because the footer is the same on every page, fetch the numbers once per request, not per component.
How does the meter read to a screen reader?
It is a progress bar named "Storage used: 8.2 of 10 GB". The name is passed through the progress bar's translations, because Ark ignores aria-label. The number beside it is plain text, so the share is never carried by the bar alone.
Why doesn't the meter change colour as it fills?
The footer keeps the primary colour for the one action, so the meter uses the foreground tone at every level. Add your own warning state, a status icon or a line of text, if usage passing a threshold needs more than a number.
How is the button a link on each library?
It is a real link styled as the Shine Button. The button wraps an anchor with asChild. Point href at your plans page.