shadcn.io is not affiliated with official shadcn/ui
Budget Alerts Settings Block for React
A budget alerts panel with the month's spend, a projection tick on one bar, two draggable thresholds on the same track, the day each is projected to be crossed and an action at Critical.
Installation
Overview
Set what a cloud bill is held to and when to hear about it, with this budget alerts panel for React with Base UI. Inside a hairline frame with a plus mark on each corner, three figures give what has been spent so far this month, where the month is projected to land at that pace, and the budget. Under them one bar shows the spend, with a tick where the month is heading, and a two-thumb Slider on the same width sets Warning and Critical as shares of the budget; the thumbs stay at least five points apart. A row for each threshold says what it comes to in dollars and the day the month is projected to cross it ("Projected to cross on 2026-10-30."), or that it already has or will not this month. The last band has a Number Input for the monthly budget (refused below what is already spent) and a Native Select for the action at Critical: notify only, pause preview environments or block new deployments, with a sentence on what each would do and from when. A status line counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Slider, Number Input, Native Select, Button, Shine Button and Guides, with a CSS entrance only. For cost trackers, cloud dashboards and any product that bills by use.
FAQ
Where do the spend, the projection and the dates come from?
From constants: SPENT is what the account has spent so far, MONTH says the page is on day 18 of 31 and starts on 2026-10-01, and the daily rate is the spend divided by the days gone. The projection is that rate times the days in the month, and a threshold's crossing day is its amount divided by the rate, rounded up, turned into an ISO date with Date.UTC. Nothing reads the clock, so the sentences are the same on every load.
What are the limits on the two thumbs?
Warning must be at least 1 and Critical at most 100, with five points at least between them; a move that would break either is ignored, so the thumbs never cross. Each thumb is read out with its name, value and amount ("Warning at 75 percent, $9,000"). The bar above the slider is decorative and the figures say the same in text.
What happens if the budget is lower than the spend?
The field keeps what you type, but the line under it turns into a message that the budget is under this month's spend, and Save is refused with focus back on the field. Leaving the field puts a whole number between 1,000 and 50,000 back in it.
What stays local, and how do I wire it for real?
Everything: nothing alerts and no environment is paused or blocked. Save keeps the settings in this page and says so. To make it real, read the spend and the budget from your billing system, store the thresholds and the action with the account, and run the action from the job that already watches spend.
Does the bar mirror in a right-to-left page?
No. A budget runs from zero to the full amount, so the bar, the slider and their ruler stay left to right inside a right-to-left page, in a direction provider so the arrow keys follow what you see. The text around them, the figures and the sentences, follow the page.
Related
- Pro
Usage Alerts Billing
Plan and usageUsage alert settings: percentage thresholds as switches with number inputs, recipients as email chips, and a choice between email and a webhook, with a save that checks them.
- Pro
Usage Limits Settings
Product controlsA row for each resource with a usage bar, a limit field, a policy for what happens at the limit (default, block, throttle or bill extra) and a sentence that restates the outcome, plus a default every row can follow.
- Pro
Rate Limiting Settings
API and webhooksA rate limit you can try: a framed strip replays one client's 24 requests over 10 seconds against the chosen algorithm, limit, window and burst, marking each request allowed or rejected and counting both.
- Pro
Access Token Hygiene Settings
Sign-in and securityAn access token settings panel that flags risky tokens (no end date, unused for 90 days, the admin scope, ending soon), gives a token an end date from a menu, and revokes the ticked ones after an alert dialog lists them.
- Pro
Account Deletion Settings
Backups and exportsA whole-page account deletion that first asks what happens to each kind of data (delete, anonymise or transfer, with invoices locked for tax law), sums the choices in one sentence, then schedules deletion 14 days out behind a typed-email alert dialog.
- Pro
Alert Rules Settings
Alerts and auditAn alert rules panel where each rule is a sentence you edit in place with menus and a number field, beside a framed chart of its metric with the threshold line and a computed count of how often it would have fired.