shadcn.io is not affiliated with official shadcn/ui
API Usage Limits Account Block for React
One rate ceiling of 1,000 requests a minute split across four tokens with a slider each, a bar of the split with the unallocated part counted, clamping to what remains, an even split, Save and Discard.
Installation
Overview
Let people decide how much of their API ceiling each token may use, with this rate limit split for React with Base UI. A hairline frame with a plus mark on each corner holds a bar drawn across the ceiling: one segment per token in a descending weight of the foreground color and a hatched remainder, counted as "Unallocated 300", with "700 of 1,000 a minute" above it. Under it a ruled list gives each token a Slider from 0 to 600 requests a minute in steps of 50, its value beside its name and a line about its share of the ceiling. Moving a slider past what the others leave clamps it, and the line under it says "Only 550 available to this token", while Even split shares the ceiling equally. The Shine Button at the foot saves the split and Discard returns to the last saved one; a status line says how many changes are not saved yet. It's built from Slider, Button, Shine Button and Guides, with a CSS entrance only. For the settings of any metered API where one plan's ceiling is shared by several keys.
FAQ
How do I fill it with my tokens and ceiling?
Edit LIMITS, one entry per token with its name, a one-phrase note and the start value it holds when the page opens, and the constants CEILING (1,000 here), MOST (the highest a single token may hold, 600) and STEP (50). The bar, the unallocated count, the percentages and the clamp are all worked out from those numbers, so nothing else needs editing when you add a token.
What stays local, and how do I make it real?
Everything. Save copies the draft over the saved split in this page's state and says "Split saved in this demo. Nothing was sent." To make it real, send the split to your server in save and replace the saved values only when it answers, and have the server enforce the same ceiling: the page only draws it. The ceiling itself is read-only here; changing it is a plan change, not a slider.
What happens when I give a token too much?
The value stops at what the other tokens leave free (or at 600) and the line under that slider says how much is available to it and what the others hold. The status line at the foot says the same, so a screen reader hears it once. Moving the slider back clears it. Two tokens at the limit together can never total more than the ceiling, because every change is checked against the sum of the others first.
What does Even split do?
It sets every token to the same value, the ceiling divided by the number of tokens and rounded down to a step, which is 250 each here, and clears any clamp message. It counts as unsaved changes until you press Save, and Discard brings back the last saved split.
How do the Save and Discard buttons behave?
Both are always there. While nothing has changed they are marked unavailable but stay focusable, and pressing them says "No changes to save." or "No changes to discard." in the status line instead of doing nothing. With changes, the status line reads "3 changes not saved yet." On a phone the foot is pinned to the bottom of the screen so the result is always in view; from the medium breakpoint it is simply the last band.
Is it accessible?
Each slider is named "Requests a minute for ci-deploy", and its value is read out as "250 requests a minute"; the arrow keys move it by one step, Page Up and Page Down by more. The bar is a single image with a label that lists every token's value and the unallocated part, so it does not rely on its shades. Numbers keep their order in a right-to-left page and the bar stays left to right because it is a scale.