shadcn.io is not affiliated with official shadcn/ui
Tier Usage Limits Billing Block for Vue
A table of five quotas with the limit applied, usage, the most the tier allows and a status, over a request form that checks the new limit against the tier's top and turns the row to Requested.
Installation
Overview
Let customers ask for more without writing to support, with these tier usage limits for Vue with Ark UI. Inside a hairline frame with a plus mark on each corner, a native table lists five quotas on a Pro account of Tickfern, an uptime monitor: monitors, status pages, team members, SMS alerts a month and API requests a day. Each row shows the limit applied now, the usage in words and a bar, the most Pro lets that limit rise to, a status (Badge: Applied, or Requested once a request is open) and a ghost Request button. Under the table a standing band asks for an increase: a Native Select for the quota, a Number Input for the new limit and a Native Select for the reason. A limit at or below the one applied, or above the tier's top, gets a message in a reserved slot ("Pro tops out at 20,000: Business raises it to 100,000"), and Send request, the only Shine Button, refuses it and moves focus to the field. A valid request turns its row to Requested; the applied limit does not change. On a phone each quota is a card. For monitoring, API and infrastructure products with tiered quotas.
FAQ
How do I fill it with my own quotas?
Edit QUOTAS. Each has an id, a name, the limit applied, how much is used, the top the current tier allows and what the next tier raises it to. The usage bars, the checks and the messages are worked out from them. REASONS fills the second menu.
How is the new limit checked?
It has to be a whole number, above the limit applied and no higher than the tier's top. Each failure has its own sentence and the last one names the next tier. The message sits in a slot that is always there, linked to the field with aria-describedby, and the field is marked invalid after a refused send; typing again clears it. Digits typed in an Arabic locale are converted before they are read.
What does a row's Request button do?
It picks that quota in the form, clears the new limit and moves focus to it, so you can type the number straight away. Each button names its quota for a screen reader ("Request more Monitors"). The form's own quota menu does the same choosing without the shortcut.
What stays local, and how do I wire it for real?
Sending marks the row Requested and says "Request kept in this demo. Nothing was sent." The applied limit never changes, because only your support or billing flow can raise it. To make it real, post the quota, the new limit and the reason from send, then load each quota's status from the response.