Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Usage Dashboard AI Block for Solid

Pick a plan and see three rate-limit meters, a 30-minute request chart with the limit drawn across it, a table of throttled minutes with retry times, a derived sentence about the next plan up, and a real CSV download.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show developers how close an API key is to its limits, with this usage panel for Solid with Ark UI. Ratebrook, an API usage monitor, opens with a Select for the plan (Free, Build, Scale) that re-derives everything below it: three meters in a hairline grid (requests per minute, tokens per minute, requests per day) with the figure, a bar and the share used, a 30-minute column chart of typed request counts with the plan's limit drawn across it, and a table of the first four throttled minutes with a retry time. A sentence says how many minutes hit the limit and whether the next plan up would have avoided them, and the Shine Button Download CSV saves the 30 minutes as a file. For API consoles, developer dashboards and any product with rate limits.

FAQ

What stays in the page, and how do I make it real?

The 30 request counts, the current usage and each plan's limits are typed in the file. Which minutes are throttled, the retry time, the share used and the sentence are worked out from them, and Download CSV writes a real file from the same rows. Nothing is measured and no plan changes. To wire it for real, return the counts per minute and the plan's limits from your API and keep the rest.

How is a throttled minute decided?

A minute is throttled when its request count is above the plan's requests per minute. The retry time is four seconds plus two for every request over, up to a minute. Change the plan and the count of throttled minutes, the table and the sentence change with it.

How is the chart made accessible?

The columns are drawn for the eye and hidden from screen readers. A caption gives the range, the peak and the limit, the meters carry their figures as text, and the throttled minutes are a real table, so every number is available without the picture.

Does the page move when I change plan?

No. The throttled table always has four rows; rows with nothing to show are kept as invisible placeholders, and the sentence has room for its longest version.

How does it work from the keyboard?

The plan select opens with Enter or Space and moves with the arrow keys. Download CSV is a button. Everything else is text.

How does it look on a phone?

The meters stack in one column, the chart keeps its height and fills the width, and the Over by column of the table is hidden while Minute, Requests and Retry stay.