shadcn.io is not affiliated with official shadcn/ui
Budget Timeline Calendar Block for Solid
Five months of spending by five categories against a plan, a buffer and the month it runs out, with a spend adjustment slider and a month picker that lists each category with a bar.
Installation
Overview
Show how long a buffer lasts with this budget timeline for Solid with Ark UI. A hairline frame with a plus mark on each corner starts with the buffer remaining out of $15,000 on 1 August, a bar for it and one sentence that says how much the planned months draw each month and the month it runs out ("At $1,255 a month it runs out in August 2027."). A native range slider, Spend adjustment from minus 20 to plus 20 percent, moves November and December, the two planned months, and the sentence moves with it. Five month cells on shared hairlines (August to October actual, November and December planned) each show their total, and choosing one lists its five categories as a table with the plan, what was spent or is forecast, how it compares and a bar with the plan marked on it. Amounts are whole cents, so the sums never drift. The phone folds the plan into the first cell and drops the bar, and the bands are ruled by Guides. It's built from Guides and native inputs, with a CSS entrance only. Example data, not advice. For household finance, small-team budgets and any plan that has to last.
FAQ
How do I fill it with my own figures?
Edit CATEGORIES (a name, five planned amounts and three actual amounts, in whole cents), INCOME and BUFFER, and MONTHS with ACTUAL_MONTHS to say how many months are actual. The buffer remaining, the monthly draw, the runway and every total are worked out from those.
How is the runway worked out?
The actual months draw from the buffer by what they spent minus the income. The planned months' average spend, moved by the slider, minus the income is the monthly draw. The buffer remaining divided by that draw, rounded down, is the number of full months after November before it runs out. If spending stays below income it says the buffer grows, and past 24 months it says it lasts longer than that.
Why whole cents?
Adding decimals can drift by a cent, so every amount is an integer and is only turned into text with a currency formatter you can change at the top of the file. The slider rounds each adjusted amount to a whole cent.
How do I use it with the keyboard?
The slider is a native range input with a visible label and a spoken value ("+5 percent on November and December"). The five months are one group of radio buttons: Tab enters it and the arrow keys move between months. The table is plain, with a caption naming the month.