shadcn.io is not affiliated with official shadcn/ui
Rate Limit Increase Success Block for React
A confirmation panel for a raised API limit: a group of buttons for all regions, EU and US, one derived sentence with a before-and-now meter, three endpoints with the same paired bars and their limits in words, the burst bucket, and a local benchmark.
Installation
Overview
Show what a higher limit means with this confirmation panel for React with Base UI. It is the panel Pacegate, an API platform, shows after a limit is raised: a header with one action, the Shine Button that runs a benchmark, over one framed card ruled by Guides. A Toggle Group picks all regions, the EU or the US; one derived sentence says the combined limit now and before and how many times as many, over a meter of two bars (hollow before, filled now); three endpoints (Read, Write, Search) carry the same pair of bars with their limits in words and the multiple; and the burst bucket says how much it holds and how long it takes to fill. For developer portals, API dashboards and account limits.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was changed or sent. The limits per endpoint and region and the burst buckets are typed sample data, and the benchmark only works a sample result out from the new limit (99 percent of it, held for 30 seconds, none refused). To wire it, fill ENDPOINTS with your before and after limits for each region and BURSTS from your bucket settings; the combined figures, the multiples, the bar widths and the sentences are worked out from them, and the all-regions scope is the sum of the regions.
What do the region buttons do?
They are a group of three buttons with one always on. Choosing a region re-derives the sentence, both meters, the three endpoint rows and the burst line from that region's numbers, says the multiple in the status line, and keeps the panel's height.
How should I read the bars?
On one fixed axis, so a smaller region shows shorter bars: the hollow bar is the limit before and the filled bar is the limit now, and the words under each pair give both numbers. Nothing relies on the drawing, which is hidden from assistive technology; the sentence and each row say the same figures, and the key under the first meter names the two bars.
What does Run a benchmark do?
It says a sample benchmark is running, waits a moment while the button keeps its size and stays focusable, then reports a typed sample result for the chosen region: how many requests per second held for 30 seconds, and that none was refused. Nothing is sent. Connect it to your own load test and show its real result.
Related
- Pro
Cache Purge Success
Domains and networkA confirmation panel for a CDN purge: four figures worked out from the data, six edge regions each with a cache bar and the time it took, the purged paths as chips with their object counts, and a local Re-warm that fills the regions one after another.
- Pro
Cluster Scaled Success
Servers and storageA confirmation window for a scaled cluster: twelve node slots in a framed canvas that a number field redraws, an Autoscale switch that dashes the room to grow, and the vCPU, memory, requests and monthly cost worked out from typed per-node figures.
- Pro
Deployment Live Success
Builds and deploysA confirmation window for a live deploy: a drawn browser with the real address and a copy button, a group of buttons that redraws the site at desktop, tablet and phone width, and the deploy's facts and four passed checks beside it.
- Pro
Usage Alerts Billing
Plan and usageUsage alert settings: percentage thresholds as switches with number inputs, recipients as email chips, and a choice between email and a webhook, with a save that checks them.
- Pro
Storage Quota Expanded Success
Plans and limitsA confirmation panel for a raised storage limit: a capacity ruler from 0 to 2 TB with the space used, the old limit and the space added, three figures worked out from the same numbers and a forecast of when the free space runs out at a growth rate you pick.
- Pro
Webhook Tested Success
Integrations and syncsA confirmation window for a tested webhook: a table of deliveries that Send again adds a second to, and for the chosen one its status, time and copyable id with tabs for the response and request bodies in a JSON tree and the headers in a table.