shadcn.io is not affiliated with official shadcn/ui
API Usage by Key Monitoring Block for React
Five API keys over 24 hours: the chosen key as hourly columns with a median line and a spike line at three times it, a Requests or Tokens scale, a cursor that reads each hour, and a ranked list of keys with sparklines.
Installation
Overview
See which API key spiked and when, with this usage panel for React with Base UI. It is Limitlark, an API usage monitor (made up), watching five keys of one workspace for 24 hours. A hairline frame with a plus mark on each corner holds the chosen key as 24 hourly columns on one scale, with a dotted line at the key's median hour and a dashed spike line at three times the median. A column over the spike line is solid and carries a diamond; the quiet hours are a lighter grey. A Toggle Group in the header switches the scale between requests and tokens, and a hidden range over the plot is the cursor that reads one hour against the median. Under the plot three figures give the peak hour, the median hour and the number of spike hours. A list of the keys, each with its peak, how many times the median that is, a sparkline and a Badge where it spiked, ranks them by their biggest spike; choosing one redraws the plot. Guides draw the frame and its bands; the entrance is CSS only. For platform teams, key owners and anyone who gets a surprise on a usage report.
FAQ
How do I use my own usage numbers?
Edit KEYS: each key has an id, 24 hourly request counts (hours, oldest first) and tokensPer, the typical tokens per request used for the Tokens scale. The demo builds the counts from a daily curve plus a seeded wobble and one bump per spiking key. The median, the spike hours, the ranking, the sparklines and the scale of the plot are all derived. The spike rule is SPIKE, three times the key's median hour.
What counts as a spike?
An hour with more than three times the key's median hour. The median, not the mean, so one big hour does not hide itself. Keys with no such hour read "No spike" and show no badge. The list is ranked by the peak hour divided by the median, so the most surprising key comes first and is chosen when the page loads.
What changes between Requests and Tokens?
Only the numbers and the scale: tokens are the request count times a typed tokens-per-request for that key, so the shape, the spikes and the ranking stay the same. Large values shorten to millions (3.4M). The plot keeps its height and the reading updates.
How does the cursor work?
It is a native range named Hour, with a value text of the hour and its count. Arrow keys move it one hour, Home and End jump to the ends. Choosing another key puts it on that key's peak. The reading says how many times the median that hour is and whether it is over the spike line, and a polite status line speaks it after a short pause.
What is real here and what is typed?
All of it is typed: the keys, the counts and the tokens per request are examples, and nothing is metered. The text names an OpenAI-style API once and asserts nothing about it; no rate limit or price is shown. In your app feed the same shapes from your provider's usage endpoint or your own gateway log.