Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Developer API Quota Billing Block for React Aria

An API plan's rate limit and monthly quota read against one request rate: a slider and an active-hours field show which limit a client hits first, how many days the quota lasts and what share of requests get a 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

Show a developer which of their API limits they will actually reach, inside your app, with this API quota section for React with React Aria. A hairline frame with a plus mark on each corner has two cells. The first describes the client: a Slider for requests a second and a Number Input for the hours a day it is active, with one sentence under them that names the limit hit first ("At 12 a second the quota lasts about 23 days"). The second cell reads that same input against both limits as Progress meters: the rate limit, where the surplus above 20 a second is turned away with a 429, and the monthly quota of 1M requests. A Shine Button raises both to the Scale plan's limits, the only colored control, and an outline Button goes back. Each cell is divided by Guides with plus marks where it meets the frame. For API products that sell a rate limit and a quota together.

FAQ

How do I set my own plans and limits?

Edit STARTER and SCALE at the top of the file: each is a plan's name, its rate limit in requests a second and its monthly quota. MONTH is the billing month in days and RATES and HOURS are the slider's and the field's ranges. Everything on the page is derived from those and the two inputs, so nothing else needs to change when a plan does.

How is the answer worked out?

The API accepts at most the rate limit each second, so a client sending faster has the surplus turned away: at 35 a second against a limit of 20, 43% of requests get a 429. What gets through is multiplied by 3,600 seconds and by the active hours to give a day's requests, and the quota divided by that is the days it lasts. The sentence compares the two and says which bites first. It assumes a steady rate; a real client is burstier, so treat it as a planning aid.

Does Raise to the Scale limits change my plan?

No. It swaps the two limits on this page and says "Nothing was changed"; "Back to Starter" undoes it. In your app, send the plan change to your billing API from the button and set the limits from what it returns. The meters and the sentence then rewrite themselves from the new numbers.

What does a screen reader hear?

The slider is named "Requests a second" and reads its value in words. The field is labelled "Active hours a day". The two meters are headed by an h3 with the figure beside it, and the bars only repeat those figures, so they are hidden from assistive technology. When you let go of the slider, a polite status line reads the sentence once. React Aria commits a typed number on blur, Enter or an arrow key, not on every keystroke, so the meters update when you leave the field.

What happens if I type a number that is out of range?

The field keeps the last valid number for the figures and, when you leave it, shows that number again: the hours stay between 1 and 24. The slider can't leave its range, and Arabic-Indic digits typed in a right-to-left page are read as numbers.

How does it look on a phone?

The slider comes first, then the hours field and the sentence, and the two meters stack under them. The raise button sits in a foot that sticks to the bottom of the screen.

All 167 billing blocks