shadcn.io is not affiliated with official shadcn/ui
Credit Packs Pricing Block for Solid
One-time credit packs where the amounts lead: 500, 2,000, 10,000 and 50,000 credits at display size over growing coin stacks, each pack cheaper per credit, rows with a buy button on phones.
Installation
Overview
Sell credits by the pack with this credit packs pricing section, shown here for Prism Render, an AI image generator. The amounts are the hero: four packs of 500, 2,000, 10,000 and 50,000 credits, each set at display size over a stack of coins that doubles from pack to pack, in one band of cells that share hairlines and meet the page's side rails, with + marks on its corners. Under each amount sit the pack price, the base-rate price struck through, the price per credit in cents and the saving, then a buy button. A compact header row says what a credit buys (a 1024 px image is 1 credit, 2048 px is 4, an upscale 2), so the first screen is the packs, not the introduction. On a phone each pack becomes a row: amount, price, buy. The Studio pack is tinted, carries a Best value outline Badge and the only filled Shine Button. Built with Badge, Guides, Shine Button and Tailwind CSS, with CSS transitions only. For AI generation products, API credits, marketplace tokens and any one-time purchase that rewards buying more.
FAQ
How do I change the packs and their prices?
Edit the PACKS array at the top of the file: each pack has a name, its number of credits, the price it sells for once, its checkout href, and popular for the tinted pack with the badge and the filled button. The struck base-rate price, the saving and the price per credit are all worked out from the price and BASE_RATE, the price of one credit in the smallest pack. What a credit buys is CREDIT_COSTS, the key in the header row.
What are the coin stacks?
A small mark for each pack's size: a stack of coins seen from the side that doubles from one pack to the next (1, 2, 4 and 8 coins), drawn with bordered spans in your theme's border colour. It's decorative and hidden from screen readers, and it's hidden on phones, where each pack is a single row.
How do I connect the buy buttons to a one-time payment?
Each Buy button is a real link to its pack's href. Point it at a checkout for a one-time payment, not a subscription, and add the credits to the account once your payment provider confirms the payment to your server, never from the page.
How do screen readers read each pack?
The packs are a list. Each pack's name is an h3 under the section's h2, followed by its amount, its price (the struck price is read as "Was $200, now $150") and its price per credit. Each button says what it buys, as in "Buy 10,000 credits for $150", so the four buttons don't sound alike. The header's key is a description list, read as "Image, 1024 px: 1 credit".
How does it look on a phone?
Below the sm breakpoint each pack is a row: the name above, then the amount, the price with its price per credit, and a Buy button, so all four packs and the filled button fit within the first screen and a half. From sm the packs are a two-by-two of cells, and from lg one row of four. The struck price and the saving show from sm, where there is room for them.
When should I sell credit packs instead of a subscription?
Credits suit usage that comes in bursts or varies from month to month, such as image generation, transcription or API calls: customers pay up front for what they expect to use, and bigger packs reward committing more. A subscription suits steady, predictable use, where a monthly price is simpler to understand.