shadcn.io is not affiliated with official shadcn/ui
Rate Limit Onboarding Block for Vue
A request-limits panel with a workspace slider, a per-key slider, a number of keys in use and an overage select, and a two-bar figure that shows whether the keys together can ask for more than the workspace allows.
Installation
Overview
Show what a limit means before it is set with this rate-limit step for Vue with Ark UI. It is a setup panel of Sluicewick, a weather-data API: two Sliders set the workspace limit (100 to 5,000 requests a minute) and the limit for each key (10 up to the workspace limit), a Number Input says how many keys are in use (1 to 20) and a select says what happens to a request over the limit (queue it, reject it with 429, or slow it down). Under the controls a framed figure draws two bars, the workspace limit and what all the keys can ask for together, names the state Oversubscribed or Within the limit, and says it in a sentence (“5 keys at 500 can ask for 2,500 a minute, 1.3 times the workspace limit of 2,000”). Apply limits is the one Shine Button, with Discard beside it. On a phone the figure sits under the sliders.
FAQ
Where do the numbers come from?
The keys' total is the number of keys times the limit for each key, and the ratio is that total over the workspace limit; both are worked out each render from the controls, never typed twice. The word reads Oversubscribed when the ratio is above 1 and Within the limit otherwise. A key can't be given more than the workspace has, so lowering the workspace slider pulls the key slider's value down with it.
How is the figure built?
Two bars on one scale: the larger of the workspace limit and the keys' total fills the track, so the bars always compare fairly. A tick on the second bar marks the workspace limit. The widths are CSS variables, they ease only when motion is allowed, and the figure is always drawn left to right, even on a right-to-left page. It is hidden from assistive technology because the sentence under it says the same thing.
What do the three overage choices do?
They are text in this demo: OVERAGES holds each one's label and sentence, and the sentence under the select changes with the choice. In your gateway, Queue holds a request for a short time, Reject answers 429 with a Retry-After header and Slow down delays the answer a little more each time. Keep the sentence honest about what your gateway really does.
How does the number of keys work?
It is a Number Input from 1 to 20. A value outside the range is put back to the nearest valid number when you leave the field. Digits typed in Arabic-Indic form are read correctly.
What stays local in the demo, and how do I wire it?
Everything. Apply limits keeps the numbers in the page and says nothing was limited. In your app send the workspace limit, the per-key limit and the overage choice to your gateway where apply says so, and read the number of keys from your real key list instead of a field.