shadcn.io is not affiliated with official shadcn/ui
Budget Alerts Settings Block for Svelte
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 Svelte with Ark 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.