shadcn.io is not affiliated with official shadcn/ui
Credits Purchase Checkout Block for Svelte
Four credit packs chosen by how long they will last: your last eight weeks of use as bars with a text table, and a sentence worked out from your balance, the pack and your weekly average, laid against the twelve months credits live.
Installation
Overview
Sell credits by what they buy you in time, with this credits purchase checkout for Svelte with Ark UI. A compact header from Embervale, an AI image tool, says that each image costs one credit. In a hairline frame with a plus mark on each corner, the first band is the choice: four packs from 1,000 to 20,000 credits as native radio rows, each with its price and its price per 1,000, and your balance in the band's heading. The second band is a figure of your last eight weeks of use, drawn as bars with the average dashed across them and the weeks labelled by the day they start; the same eight numbers are a table for anyone who cannot see the bars. The third band is the answer, worked out from those numbers: "At your pace, 5,000 credits last about 9 weeks" is your balance plus the pack, divided by your weekly average, shown again as a bar against the twelve months credits live for, with the expiry date. Buy 5,000 credits for $40.00 is the only Shine Button, and its label follows the pack. It's built from native radios, a hand-drawn SVG, Shine Button and Guides, with a CSS entrance only. For AI tools, API credits, print quotas and any prepaid balance.
FAQ
How is the runway worked out?
Balance plus the pack's credits, multiplied by the number of weeks in the history (8) and divided by the total used in those weeks (4,630), rounded down to whole weeks. With 340 credits and the 5,000 pack that is 5,340 times 8 over 4,630, about 9 weeks. It is an estimate at your recent pace, not a promise: the sentence says "at your pace", and the sentence under the bar spells out the three numbers it used.
How are the bars made, and what do they say to a screen reader?
They are an SVG with one rectangle per week, scaled to a fixed top of 800 credits, and a dashed line at the average. The SVG is hidden from assistive technology and a visually hidden table of week and credits used stands in for it, so the information is the same. Edit the WEEKS array to use your own history; the average, the bars and the runway all read from it.
What about credits that expire?
The policy is typed: credits expire 12 months after purchase, and the sentence under the runway names the date that would be for a pack bought today. The runway bar is drawn on a 52-week scale so a pack that would outlast its expiry visibly reaches the end. Set EXPIRY and EXPIRES_ON from your own terms.
Why is the price per 1,000 shown?
So the bigger packs are comparable without arithmetic: it is the pack's price in cents times 1,000, divided by its credits, so $40.00 for 5,000 is exactly $8.00. Every figure is an integer number of cents and usd is the only place cents become text.
How do I choose a pack with the keyboard?
The packs are one native radio group under a "Credit pack" legend: Tab enters it, the arrow keys move between packs and the choice follows focus, with a visible ring on the row. The polite status line says what the new pack does to the runway.
What stays local, and how do I wire it up?
Everything: the balance, the eight weeks and the packs are typed in the file, and Buy says "added in this demo" and charges nothing. In your app read the balance and the weekly usage from your usage endpoint, and have the button create the checkout for the chosen pack on your server.