shadcn.io is not affiliated with official shadcn/ui
Quota Tile Grid Stats Block for React
Six plan-quota tiles (seats, API calls, storage, projects, bandwidth, builds) with used against limit, a bar, what is left and a reset hint in days; a tile at 90% or more gets a solid bar and an Upgrade link badge.
Installation
Overview
A plan-quota grid for React with Base UI. A start-aligned header counts the quotas that are nearly full ("Two of six quotas are nearly full") with the plan and the day of the billing cycle at its end. Under it one inset frame of six tiles shares its hairlines, three across from lg and two across below it. A tile shows what is used against the plan's limit ("94 / 100 GB"), a bar, the share used as a rolling number, what is left and when the quota resets, counted in days from the billing cycle; a quota that never resets (seats, storage, projects) says what counts instead. A tile at 90% or more has its bar drawn solid and an "Upgrade" link badge; the other bars are a lighter weight. Every share, remainder and countdown is computed from one typed list of quotas and the day of the cycle. It's built from Progress, Badge, SlidingNumber and Guides, with the bars in your theme's foreground colour.
FAQ
How do I change the quotas and the cycle?
Edit QUOTAS at the top of the file: a quota has a label, used and limit, a unit written after the figures, whether the cycle resets it and a note for one that does not. CYCLE holds the day and the length of the billing cycle, and FULL_AT the share from which a quota counts as nearly full. Large figures are written in compact notation ("1.42M").
What does the Upgrade badge do?
It is a link: point its href at your billing page. It appears only on a tile at or past FULL_AT, and its accessible name includes the quota ("Upgrade Storage"). It is a quiet outlined badge, not a second primary button.
How is the reset worked out?
As the days left in the cycle: CYCLE.days - CYCLE.day. Quotas that the cycle resets all show "Resets in 11 days" for the example cycle; the others say what counts or what to do.
Is it accessible?
Yes. Each tile is a list item with a heading, the figures, the share and what is left are text, and the bar is named ("Storage: 94 of 100 GB, 94% used"). Values sit in bdi elements so a right-to-left page doesn't reorder "94 / 100 GB". The solid and lighter bars differ in weight and the badge says it in words, so nothing relies on colour.
The bar takes an aria-label.
Related
- Pro
Goal Target Tile Grid Stats
Goals and progressFour regional goal tiles for a sales team, each a count of targets met and a bar of five segments, solid for met, outlined for the next, with a hint row that names the next market and its value.
- Pro
Threshold Target Cards Stats
Goals and progressFour delivery-target tiles you can filter with a segmented control (All, Watch, At risk) that dims the others, each with a bar marked at its watch and at-risk thresholds and a state in a glyph and a word.
- Pro
OKR Target Cards Stats
Goals and progressThree objective cards for an OKR tool, each with a large completion percent that is the mean of its three key results, nested key-result bars with current and target, and a line naming the key result furthest from its goal.
- Pro
Ratio Tile Grid Stats
Goals and progressFour goal tiles for a publishing house, each a ratio like 11 of 16, a progress bar and a pace tick that marks where the plan says the goal should stand today, with how many days ahead or behind it is.
- Pro
A gateway usage table where each route shows calls, error rate, a p50-to-p99 latency range on one scale, and a bar for its share of the rate limit.
- Pro
Target Ratio Progress Stats
Goals and progressFive team rows led by a booked-over-quota ratio at display size, each with a bar along the row's floor and the share and the gap written at the end.