Credit packs as a radio list next to a stack of coins that grows and drops new coins in as you pick a bigger pack, with bonus credits glowing on top. Below, live counts show what the credits buy.
Credits
Credits never expire and work across every tool. Bigger packs come with bonus credits on top.
One-time payment. Unused credits roll over forever.
npx shadcn@latest add https://hyperblur.dev/r/pricing-credit-stack.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-credit-stack.tsx.
import { PricingCreditStack } from "@/components/hyperblur/pricing-credit-stack"
<PricingCreditStack currency="GBP" locale="en-GB" onPurchase={(pack) => console.log(pack)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Credits" | Label with a coin mark above the title. Empty hides it. |
| title | string | "Top up once, create all month" | Section heading. |
| subtitle | string | Paragraph under the heading. Empty hides it. | |
| packs | { credits: number; price: number; bonus: number; label?: string }[] | 1k, 5k, 15k, 50k | Packs. bonus is a fraction added on top (0.2 is 20%). |
| uses | { label: string; cost: number }[] | Images, voiceover, video | What credits buy and their cost in credits. Empty array hides the row. |
| currency | string | "USD" | ISO 4217 currency code passed to Intl.NumberFormat. |
| locale | string | "en-US" | Locale used to format every amount. |
| selected | number | Controlled selected pack. Pair with onSelectedChange. | |
| defaultSelected | number | 2 | Initial selected pack when uncontrolled. |
| onSelectedChange | (index: number, pack: PricingCreditPack) => void | Called when a pack is picked by click or arrow keys. | |
| onPurchase | (pack: PricingCreditPack) => void | Called when the buy button is pressed. | |
| buyLabel | string | "Buy" | First word of the buy button. |
| accent | string | "#f5a524" | Bonus coins, selection and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variables. |