shadcn.io is not affiliated with official shadcn/ui
Credit Packs Pricing Block for React
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. It's a ShineButton with render set to an a element and nativeButton={false}. 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.
Related
- Pro
Prepaid Credits Pricing
Usage and creditsA top-up picker for prepaid credits: amount chips that show the bonus each earns, a field for any other amount, and the credits you get rolling to a display-size number over a paid-and-bonus bar.
- Pro
Volume Discount Pricing With a Descending Chart
Seats and teamsPer-seat pricing that falls across four team-size brackets, drawn as a descending bar chart beside compact rows with the saving on each bracket and a call to action per row.
- Pro
Pay As You Go Pricing
Usage and creditsUsage pricing for a serverless platform as rate rows: each billable resource with its free allowance, its starting rate at display size and the two volume steps that lower it, with one call to action in the header.
- Pro
Tiered API Pricing
Comparison tablesAPI tiers by request quota, with the quota as the headline: four columns open with 10k, 250k, 2M and 10M+ requests a month at display size, then the price, the overage rate and a call to action, over grouped limits and features.
- Pro
Bundle Deal Pricing
Discounts and offersTwo products priced alone beside a bundle of both: the bundle leads on a raised card with the sum of the parts struck through, the bundle price at display size, and a list of features that collapses on phones.
- Pro
Addon Builder Pricing
CalculatorsA CRM sold as a base plan plus six add-ons that switch on and off in cells sharing hairlines, with the price per seat rolling big beside them and a sticky total bar on phones.