shadcn.io is not affiliated with official shadcn/ui
Credit Balance Billing Block for Ark UI
A monthly credit statement for an image generator: a month switch, five cells (opening, purchased, bonus, used, closing), a check that each month closes where the next opens, credits used by category, and a November budget that works out the opening balance.
Installation
Overview
Show credits as a statement that adds up, with this credit balance section for React with Ark UI. The header holds a Toggle Group of months. Under it a hairline frame with a plus mark on each corner holds five cells on shared lines: opening balance, purchased, bonus, used and closing, with a line that prints "Reconciles" and the sum, and checks that the month closes at the same figure the next one opens with. A ruled list gives credits used by category (renders, upscales, exports) with a bar and a share each, the shares added to 100 by largest remainder. The last band takes a Number Input, "Credits for November", which starts at October's use and works out the opening balance in November and how many credits would still need adding. The Shine Button at the foot notes the budget. It's built from Toggle Group, Number Input, Shine Button and Guides, with a CSS entrance only. For billing dashboards, prepaid products and any account that reconciles its credits.
FAQ
How do I fill it with my statements?
Edit STATEMENTS, one entry per month with its opening balance, credits purchased, bonus credits and a used list by category. The closing balance, the totals and the shares are worked out from them, and the reconcile check compares each closing with the next month's opening, so a gap in your data shows as "Does not reconcile" instead of being hidden.
Why do the shares always add to 100?
Each category's exact share is rounded down and the spare points go to the largest remainders, so three rows can never read 49, 36 and 14 for a total of 99. The bar under each row uses the same whole numbers.
What does the budget work out?
The opening balance in November is October's closing balance. If the number of credits you want is above it, the block says how many are still to add; if not, it says the balance already covers it. It's arithmetic on the page, not a promise from your provider.
What stays local, and how do I make it real?
Setting the budget changes the status line and nothing else: "November budget of 4,780 credits noted in this demo. Nothing was stored." In your app send the budget to your server, let it decide how a shortfall is bought (a pack, or an auto-recharge rule) and show the saved figure from its response.
Is it accessible?
The month switch is a named group of toggle buttons with arrow-key support, the five cells are a list with a label each, and the status line names the month when you change it. Signs are shown as a sign and a word ("Used", "-4,780"), never colour alone, and numbers keep their order in a right-to-left page.