shadcn.io is not affiliated with official shadcn/ui
Prepaid Credits Billing Block for Svelte
Three credit bundles on shared hairlines that convert into images, upscales or videos: pick the unit and each bundle shows how many you get and what one costs, then buy the chosen bundle.
Installation
Overview
Sell credits in the unit your customers think in, with this prepaid credits panel for Svelte with Ark UI. It's the buy screen of Gleamcraft, an AI image tool: a hairline frame with a plus mark on each corner holds a top band with the credits in the account, in Sliding Number digits, and a Segment Group that counts them as images, upscales or videos (1, 2 and 20 credits each). Under it three bundles sit on shared hairlines as radio cards (Starter, Growth and Scale), each with its price, its credits and bonus, the count it comes to in the chosen unit ("about 3,000 images") and the price of one; the bundle with the lowest price per credit says so. The foot has the Shine Button, "Buy Growth", the only colored control. For AI products, APIs and any app that sells credits in packs.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The balance, the bundles and the card are typed at the top of the file, and Buy adds the bundle's credits and bonus to the balance in the page with a status message that says no charge was made. To wire it, read the balance and the bundles from your billing provider, and make Buy create a payment through your provider's hosted fields, adding the credits when it succeeds. The block never takes a card number.
How does the unit change the numbers?
Each unit has a cost in credits in UNITS. A bundle's count is its credits plus bonus divided by that cost, rounded down; the price of one is the bundle's price divided by the count, shown in cents when it is under ten and in dollars above. Switching the unit rolls every count and updates the line under the balance, so the same bundle reads "about 3,000 images", "about 1,500 upscales" or "about 150 videos".
Who gets the Lowest per credit badge?
It is computed, not typed: the bundle whose price divided by its credits plus bonus is smallest. Changing a price or a bonus in BUNDLES moves the badge. The badge is an outline badge in text, never a color.
Are the bundle cards accessible?
Each card is a label around a native radio button, in a fieldset with a hidden legend, so arrow keys move between bundles and the whole card is the target. The chosen card has an inset foreground ring and a tint, which is a state shown by more than color. The unit control is a labelled group with a hint that says what one unit costs.