shadcn.io is not affiliated with official shadcn/ui
Free Tier Status Billing Block for Radix UI
A free request pool drawn as one bar split by project, with a switch per project that pauses it and re-dates the day the pool runs out, and Upgrade to Pro as the way out.
Installation
Overview
Show what a free plan has left and what would stretch it, with this free tier status panel for React with Radix UI. A single bar draws the month's 1,000 free requests split by project, with the 840 used and the 160 left written out under it. Below, a row for each of three projects (a marketing site, staging and docs) gives what it has used and how many requests a day it makes, and a Switch that pauses it. Pausing a project lowers the daily pace, so the sentence above works out again when the remaining requests run out, and a second line says how many days longer that is than with everything running. Shine Button Upgrade to Pro is the only colored control, because pausing is a way to wait, not a way out. The frame and its bands are ruled by Guides. It's built from Switch, Shine Button and Guides, with a CSS entrance only. For hosting, API and metered products with a free plan.
FAQ
How do I fill it with my projects and pool?
Edit PROJECTS (each has a name, the requests it has used this month, its daily rate and a bar shade) and the constants POOL, AS_OF and RESET. The remaining requests, the pace, the bar widths and every date are worked out from those, so nothing is typed twice. Read the used counts and the pool from your usage API and take the daily rate from the last week of each project.
How is the run-out date worked out?
The requests remaining are divided by the daily total of the projects that are running, rounded down to whole days and added to the date of the data. If that lands on or after the refill day the sentence says the pool lasts to the end of the month instead, and if every project is paused it says nothing is using requests. The pace is an average, so the text says "at this pace" rather than promising a date.
What stays local, and how do I make it real?
All of it. The switches change the estimate in the page only and no project is paused anywhere; the status line says so, and Upgrade to Pro answers that it isn't connected. To make it real, call your own pause endpoint from the switch handler, reload the project's rate from the response and keep the old state if the call fails. Point Upgrade to Pro at your checkout.
How do screen readers hear a change?
Each switch is named for its project, and the sentence about the run-out date sits in a polite status line that is present from the start. Pausing or resuming a project rewrites it ("Staging paused. At this pace the 160 requests remaining last until Oct 30."). The bar is decoration: its numbers are all in the text.
How does it look on a phone, and by keyboard?
The bar and the headline stack on top, each project row keeps its switch at the end and the sentences wrap, and Upgrade to Pro sits under the status line. By keyboard each switch is one Tab stop and takes Space; nothing moves when a date changes, because the sentences have reserved lines.