Billing Quota Limit Alert
A quota alert for usage-based products, showing how much of a resource, like API requests, storage, or seats, has been used against its limit. The progress bar and container tint shift from neutral to amber to red as usage climbs, and an upgrade button appears once the account is nearing or at the limit.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-quota-limit-alert.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing106.tsx instead.
Usage
The file also exports billing106Demo, 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 { Billing106, billing106Demo } from "@/components/blocks/billing/billing106"; export default function Page() { return <Billing106 {...billing106Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Usage limit" | Heading at the top of the card. |
| resourceLabel | string | none | Description of the metered resource, for example "API requests this billing cycle". |
| used | number | none | Current usage count. |
| limit | number | none | The plan's total quota for this resource. |
| unit | string | "" | Unit label appended after the numbers, for example "requests" or "GB". |
| resetLabel | string | none | Optional note on when the quota resets, for example "Resets in 6 days". |
| upgradeLabel | string | "Upgrade plan" | Label on the upgrade button. |
| upgradeHref | string | none | Link the upgrade button points to. The button only renders when this is set and usage is near or at the limit. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- The used/limit percentage is calculated on every render from plain number props, there's no polling or subscription built in.
- The container border, icon color, and progress bar switch to amber at 80% of the limit and to red once used reaches or exceeds limit; below 80% everything stays in neutral border/primary colors.
- A "Nearing limit" or "Limit reached" pill appears in the header once the 80% threshold is crossed, matching the amber/red state.
- The upgrade button only renders when upgradeHref is provided and the account is at or near the limit, so it stays hidden for accounts with plenty of headroom.
- The progress bar is a plain div with role="progressbar" and the standard ARIA value attributes, there's no shadcn/ui Progress primitive in this project, so it's hand-rolled to match the rest of the billing category.
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.