shadcn.io is not affiliated with official shadcn/ui
Rate Limit Warning Notification Block for Radix UI
A rate-limit warning with a meter marked at 70, 90 and 100 percent, a 42-second reset countdown you can pause, and a sortable table of the six endpoints behind the traffic with their share as a bar.
Installation
Overview
Warn that an API key is close to its limit and show where the traffic comes from, with this rate-limit notice for React with Radix UI. It is Limitloft, an API platform, in a framed panel with a plus mark on each corner. The first band reads the limit: 1,742 of 2,000 requests a minute as a headline figure, a meter with marks at 70, 90 and 100 percent in foreground weights, and the catalog Timer counting down the 42 seconds until the window resets, with a Pause. The second band is a table of the six endpoints behind the traffic, each with its requests and its share as a bar and a whole percent; pressing a head sorts by it. The foot ends in "Upgrade", the one Shine Button, a link. Guides draw the lines. For API platforms, quotas and any meter that has thresholds.
FAQ
How do I use my own limit and endpoints?
Edit LIMIT, COUNTS (each endpoint has a verb, a path and its requests in the current minute) and MARKS. The total, the percentage of the limit and each endpoint's share are worked out from them; shares are whole percents shared out by largest remainder, so the six always add to 100. In your app feed COUNTS from your metrics and restart the timer from your window's real reset time.
Does the countdown really run?
Yes, for 42 seconds, then it says the window reset in this demo and the button becomes Restart countdown; the table keeps its figures, because nothing is measured live. The digits are a clock face for the eye; the Pause button is always there and says where it paused. With reduced motion the countdown starts paused instead of running, and a visitor can start it.
How is the meter made, and is it readable without colour?
It is a native meter with an accessible name, drawn over as a bar and three marks. The fill is foreground, the marks are lines with a halo, and each is labelled with its percent underneath, so nothing depends on colour. The words about what each mark does (slowing down past 90 percent, a 429 at 100) are in the header.
How does sorting work?
Pressing a head sorts by it in its first direction (largest first for Requests and Share, A to Z for Endpoint) and pressing it again turns it round; ties fall back to the endpoint's name. The head's aria-sort and an arrow say which way, and a polite line says "Sorted by share, largest first". Every row has the same height in every order.