shadcn.io is not affiliated with official shadcn/ui
API Rate Limits Table Block for React
A table of API keys with a tier select in each row, a share-of-tier bar and status word per key, and a pool band that adds the tiers up against 10,000 requests a minute and says when you are over.
Installation
Overview
Hand out request capacity key by key, with this API rate limits table for React with Base UI. Each row is an API key from a console: a name, the visible start of the key, and a Native Select that sets its tier (Free allows 60 requests a minute, Standard 600, Burst 6,000). The busiest minute of the last hour is typed for each key and becomes a share of its tier, drawn as a bar with the percentage and a status word (Within limit, Near limit, At limit), so moving a key to a smaller tier turns the same traffic from comfortable to cramped. A band over the table adds the tiers up against the account's pool of 10,000 requests a minute: one segment of the bar per key, "8,460 of 10,000 requests a minute allocated", and when the keys ask for more than the pool holds it says "Over by 460" in words with a warning icon. On a phone the peak, share and status fold under the key's name. It's built from Native Select, Badge and Guides, with a CSS entrance only. For API consoles, quota planners and any screen that shares a fixed budget between items.
FAQ
How do the tiers and the pool work?
Each key's limit is its tier's requests a minute, and the pool band adds those limits, not the traffic, because a tier is a promise of capacity. The three tiers and the 10,000 pool are small constants at the top of the file, so you can change the numbers, or add a tier, and the band, the bars and the status words follow.
What is the share of tier, and where do the words come from?
It is the key's busiest minute of the last hour divided by its tier's limit, in whole percent. Under 80 percent reads Within limit, 80 to 99 Near limit and 100 or more At limit; a key moved to a tier too small for its traffic shows the real percentage, such as 8,300 percent, with the bar full. The bar and dot carry the same information as the word, never colour alone.
What happens when the keys ask for more than the pool?
The band keeps counting honestly: the allocated figure goes past 10,000, the bar's segments shrink to fit and the second line reads "Over by 3,860 a minute. Lower a tier to fit the pool." with a warning icon. The line has a reserved slot, so the panel never changes height when it appears.
Is it accessible?
Every select is named by its key ("Tier for Mobile app"), the table has a caption, heads with scope and a focusable scroll region. A polite status line, present from load and spoken only after a change, says which key moved, its new share and where the pool stands. The pool bar is decorative; its sentence above carries the numbers.
How does it look on a phone?
The key's cell keeps its name and prefix and adds one line, "4,980 a minute, 83% of tier, Near limit", while the peak, share and status columns go below the medium breakpoint and the Last used column below the large one. The tier select stays in its own column.
What stays local, and how do I wire it for real?
The six keys, their usage and the tiers are typed in the file; choosing a tier changes this page's state and nothing is enforced or saved, and the key prefixes are made up. To make it real, load the keys and their last-hour peaks from your gateway, send the tier change from chooseTier and refuse it on the server when the pool would be exceeded, as the band already warns.