shadcn.io is not affiliated with official shadcn/ui
No Expenses Empty State Block for Solid
An expense tracker's empty month as a log: an amount and a category, a budget bar worked out in whole cents, and a drawn receipt tape with a torn edge that gets a row for each expense and holds five.
Installation
Overview
Make the first expense the start of a budget, with this no expenses empty state for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the expenses page of Thriftpost, an expense tracker, as bands. The first is the month's budget: what has been spent as words ("$42.50 of $500.00 this month") and a Progress bar in the foreground color, both worked out from the expenses in whole cents, with what is left to spend or how far the budget is passed. Under it the panel splits in two: at the start an amount in a Field with an Input and a category in a Native Select; at the end a receipt tape with a torn lower edge, a row for each expense, dashed places for the rest and a total. The Shine Button, the only colored control, Add expense, puts a row on the tape and moves the bar. The bands are ruled by Guides, and everything moves with CSS only. For the first screen of any expense, spending or budget tracker.
FAQ
What stays in the page, and how do I make it real?
Everything. The tape is state in the page: nothing is saved, exported or synced, the budget of $500.00 is a typed constant and every expense is dated with the demo's fixed day, so a reload empties it. To wire it for real, send the amount and category to your API where the code says so, list what it returns instead of the typed state, and read the budget from the account.
How is the budget worked out?
In whole cents. A typed 12.50 becomes 1250, the total is the sum of the cents on the tape, the bar is that over the budget as a rounded percentage that stops at 100, and the words say "$487.50 to go this month" or "Over budget by $112.50" from the same number. One number formatter writes every figure, in a left-to-right span, so the digits stay Western digits in a right-to-left page, and a keyboard that types Arabic-Indic digits is read as ordinary digits.
How does the tape work, and why does it hold five?
It is a real ordered list, named "Receipt tape", with a row for each expense; the five places under the shop name are drawn, so the unused ones are dashed boxes hidden from assistive technology and the first says "Next expense". Holding five keeps the panel the same height with one expense or five. When it is full the button stays in place but quiet and says so, and Start over clears the tape and puts focus back on the amount.
What if the amount is wrong?
Add expense is always there. Pressing it with nothing, or with text that is not an amount of up to four whole digits and two decimals, writes "Type an amount like 12.50." under the field, marks the field invalid and moves focus to it. The message sits in a reserved line, so the form below it does not move.
How does it look on a phone?
The bands stack: the budget, the two fields, then the tape, and the foot with Add expense is pinned to the bottom of the screen so the button is always on the first screen. The tape never scrolls sideways, and the status line has room for three lines so a longer message does not move the buttons.
Is it usable with a keyboard and a screen reader?
Tab runs through the amount, the category, Add expense and Start over; Enter in the amount adds the expense. The category is a native select, so its keys and its picker are the system's own. One polite status message says every change, such as "Added Meals $12.50 in this demo. $487.50 to go this month.", and after an add focus returns to the amount for the next one. The bar is decoration, and the same figures are in the words above it.