Billing Developer API Quota
A technical billing block for developer and API-provider dashboards. Shows monthly request usage against the plan limit, when the window resets, a projected end-of-cycle total that flags plans likely to go over, and the current per-minute rate limit. Built with shadcn/ui Badge and Button components, Lucide icons, and Tailwind CSS.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-developer-api-quota.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing47.tsx instead.
Usage
The file also exports billing47Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing47, billing47Demo } from "@/components/blocks/billing/billing47"; export default function Page() { return <Billing47 {...billing47Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "API quota" | Block heading. |
| description | string | none | Supporting text under the heading. |
| planName | string | none | Plan name shown as a badge in the top-right corner, omitted if not passed. |
| requestsUsed | number | none | Requests consumed so far in the current billing window. |
| requestsLimit | number | none | Total requests included in the current plan. |
| resetsIn | string | none | Human-readable time until the usage window resets, e.g. "9 days". |
| projectedTotal | number | none | Estimated end-of-cycle request total, shown with a warning style when it exceeds requestsLimit. |
| rateLimitPerMinute | number | none | Per-minute request rate limit for the current plan. |
| rateLimitRemaining | number | none | Requests remaining in the current rate-limit window, shown alongside rateLimitPerMinute when both are set. |
| manageLabel | string | "Manage plan" | Label on the footer link. |
| manageHref | string | "#" | Destination for the footer link. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- All the numbers displayed are plain props, the component does no polling or fetching, it renders whatever snapshot you pass it.
- The usage bar's percentage is clamped at 100% and switches to a destructive color exactly at the limit, so a plan sitting right at capacity still reads clearly.
- The projected-total callout only renders when projectedTotal is passed, and its background switches to a warning style specifically when that value is greater than requestsLimit.
- rateLimitRemaining is only shown when both it and rateLimitPerMinute are provided, passing just the per-minute limit renders that number alone without a remaining count.
- planName, resetsIn, and description are each independently optional, so the block still renders a sensible minimal card with just usage numbers if none of them are passed.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.