Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Rate Limits Dashboard Block for React Aria

Six API endpoints as ruled rows with requests used of each limit, a tick at 80% and the time to reset, and a button that sends 10 requests to the endpoint you pick until it answers 429.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how close each API endpoint is to its limit with this rate limit console for React with React Aria. A hairline frame with a plus mark on each corner holds six Burstgate endpoints, each a ruled row with the method, the path, the requests used of the limit, a bar with a tick at 80%, the requests left and when the window resets. A native select in the header picks one endpoint, and the foot's "Send 10 requests" spends its quota. Past the limit the extra requests are refused, the row reads "Limited: 429, retry after 0:42" and the button answers that the next request would be rejected. "Reset window" puts the endpoint back. It's built from Badge, Button, Shine Button and Guides. For API consoles and gateway admin pages.

FAQ

How do I fill it with my endpoints?

Edit LIMITS: an id, a method, a path, the limit for one window, the window (minute or hour), how many requests are used and the time left in resets. The header sentence, the bar, the 80% tick, the requests left and the limited count are all worked out from those fields. BURST sets how many requests the button sends.

What does Send 10 requests do?

It adds 10 requests to the picked endpoint, up to its limit. If fewer than 10 are left, the rest are counted as refused with a 429 and the status line says how many got through. At the limit the button stays focusable but only answers that the next request would be rejected.

What does Reset window do?

It sets the picked endpoint back to zero used, as if its window had just opened. The other rows keep their counts.

What stays local, and how do I wire it for real?

Everything: the counts and reset times are typed and no request leaves the page. To wire it, read each endpoint's used count and window end from your gateway or limiter store, and make the button call a test route of your own so the 429 comes from the real limiter.

Is it usable without a pointer or colour?

Yes. The bar and tick are decorative, and each row says "Used", the counts and what is left in text. A limited row adds a ban icon and the words "Limited: 429", so the state never relies on colour. Results are read out by one polite status line.

How does it look on a phone?

Each row keeps its method and path above a full-width bar, and the count and remaining requests sit at the end of each line.

All 200 dashboard blocks