shadcn.io is not affiliated with official shadcn/ui
Prepaid Balance Billing Block for Solid
A prepaid balance split into held and available money: three figures over a drawn bar, the amount you can still spend, and the running jobs that hold money, each with a Release hold button and an Add $50.00 top-up.
Installation
Overview
Show customers what a prepaid balance can really spend, with this prepaid balance panel for Solid with Ark UI. It's the account screen of Murmurloft, a text-to-speech API, that sets money aside while a job runs. A hairline frame with a plus mark on each corner holds three cells on shared hairlines (balance, held and available, in Sliding Number digits that roll), a drawn bar of the two parts with a hatched held end, and one sentence that says what you can start: "You can start jobs worth up to $64.20". Below, the running jobs are ruled rows with their id in monospace, the start date and the amount, and a ghost Button per row, Release hold, for a job you cancelled: it moves that amount from held to available and turns into Undo. The foot has the Shine Button, "Add $50.00", the only colored control, and a status line that names the card. For APIs, AI tools and any app that holds money while work runs.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The balance, the holds and the card are typed at the top of the file, releasing a hold only moves money between the two parts in the page, and Add $50.00 adds to the balance without charging anything; the status line says "Nothing was charged". To wire it, read the balance and the holds from your billing provider, release a hold by cancelling the job on your server, and create the top-up as a payment through your provider's hosted fields. The block never takes a card number.
How are held and available worked out?
Held is the sum of the holds that are still active, available is the balance minus held, and the bar and the sentence are drawn from those two numbers, so they never disagree. Releasing a hold lowers held and raises available by the same amount; the balance does not change. If every hold is released the sentence says nothing is held.
What does Release hold do, and can I take it back?
It marks the job as released in this demo: its row keeps its place and height, the note under the job name changes, and the button becomes Undo, which holds the money again. The button keeps focus because it is the same control with a new label, and a polite status message says how much moved. In a real product a release follows a cancelled or failed job, and you would not offer Undo.
Is the bar accessible?
The bar is a single image with a text alternative that gives the three amounts, and the same figures are in the cells above it, so nothing depends on the drawing. The held end is hatched, not only a different tone, so it reads without color. Amounts are in a left-to-right span so they stay whole in a right-to-left page.
How does it look on a phone?
The three figures stay in one row, the job rows put the amount beside the name and the Release hold button under them, and the foot with the Shine Button is pinned to the bottom of the screen until you scroll to it.
Can the customer choose how much to add?
Not here: the primary adds a fixed amount, TOP_UP, so the block stays about the split between held and available money. For an amount picker with chips and a custom field, use the credit top-up section; change TOP_UP to change this one, or add a Segment Group of amounts above the foot.