shadcn.io is not affiliated with official shadcn/ui
Usage Quota Metric Banner Block for Solid
An API-quota banner for an API platform on a tinted band: a bar with 80% and 95% ticks, the warning colour past the alert, and a hatched stretch to 100% for where the pace leads.
Installation
Overview
An API-quota banner for Solid with Ark UI, for a plan with a monthly limit and a pace people should see coming. A tinted band between the page's solid rails holds a heading, a sentence (requests used, the day of the month, where the pace leads and when it resets) and an "Upgrade plan" link, over one thin bar. The bar is foreground up to the 80% alert and the warning token from there to the use so far, then a hatched stretch to 100% shows the projection. Ticks mark 80% and 95%. The use, the day and the month's length are typed; the share and the day it runs out are worked out from them. It's built from Guides, with your theme's tokens for every colour. For API calls, emails sent, build minutes and any allowance that resets on a schedule.
FAQ
How is the day it runs out worked out?
At the pace so far: requests used divided by the day of the month gives a daily rate, the limit divided by that rate gives the day the limit is reached, rounded to a whole day and written as an ordinal ("the 21st"). The data is a typed snapshot (day 18 of 30) so the demo never goes stale; swap QUOTA.day for new Date().getDate() and QUOTA.days for the month's length to make it live.
Why is part of the bar the warning colour?
Because the use is past a limit that was set: the 80% alert. The bar stays your theme's foreground up to the alert and takes the warning token from the alert to the use so far, which is the only status colour in the block and appears only on the bar. The text stays in the foreground colour. If the use is under 80% the warning part has no width and the whole bar is foreground; past 95% you can move the colour to the destructive token.
What is the hatched stretch?
The runway: the part of the quota still unused, drawn as fine diagonal lines in the foreground colour to say it is a projection and not a measurement. The legend under the bar names the two parts, "Used so far" and "Projected until it resets". Both the legend and the sentence say the same in words, so the picture isn't needed to understand it.
Is the bar accessible?
The bar, its ticks and the legend are a picture, hidden from assistive technology; the heading and the sentence carry the same facts as text, with each figure in a bdi element so a right-to-left layout keeps its units in order. The bar and its ticks are set left to right in every language, because their positions are percentages of a scale, while the text follows the reading direction.
Does the tinted band follow my theme?
Yes. The tint is bg-muted/50 on the whole section, so the band runs edge to edge in the page's own tones, light or dark, and the rails and the top rule sit on it. The bar's track is the page background with a hairline border, so it reads on the tint in every preset.