Credit Pack Picker React component
A credit top-up picker: packs that get cheaper per credit, a balance that counts up as you choose, what the pack is worth in images or minutes, and an auto top-up switch.
About the Credit Pack Picker component
Credit Pack Picker sells prepaid credits the clear way: every pack shows its price per 100 credits and how much cheaper it is than the smallest pack, so bigger packs sell themselves.
As people choose, the balance counts up and a list translates the pack into something real, like 500 images or 25 video clips. An auto top-up switch and a CTA with the exact amount finish the job.
When to use it
Use it for AI tools, SMS and email senders, image and video generators, games and anything sold in prepaid credits.
For recurring subscriptions, use a pricing table.
Installation
Add the Credit Pack Picker component to your project with the shadcn CLI. It lands in components/credit-pack-picker.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/credit-pack-pickerOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<CreditPackPicker /> accepts 10 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Top up credits" |
| subtitle | string | "Credits never expire. Bigger packs cost less per credit." |
| packs | { credits: number; price: number; badge?: string }[] | DEFAULT_PACKS |
| uses Translates credits into things people can do with them. | { label: string; cost: number }[] | DEFAULT_USES |
| balance Credits already on the account. | number | 340 |
| defaultPack Index of the pack selected first. | number | 1 |
| unit | string | "credits" |
| currency | string | "$" |
| onBuy | (pack: CreditPack, autoTopUp: boolean) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Top up credits"
- subtitlestringDefault: "Credits never expire. Bigger packs cost less per credit."
- packs{ credits: number; price: number; badge?: string }[]Default: DEFAULT_PACKS
- uses
Translates credits into things people can do with them.
{ label: string; cost: number }[]Default: DEFAULT_USES - balance
Credits already on the account.
numberDefault: 340 - defaultPack
Index of the pack selected first.
numberDefault: 1 - unitstringDefault: "credits"
- currencystringDefault: "$"
- onBuy(pack: CreditPack, autoTopUp: boolean) => void
npm dependencies
Installed for you by the shadcn CLI.
Credit Pack Picker FAQ
- How is the saving worked out?
- Each pack's price per credit is compared with the first pack's, so list the smallest pack first.
- What are uses?
- uses converts credits into things people recognise: { label: "images", cost: 4 } shows credits ÷ 4 images. Pass an empty list to hide it.
- Can I rename credits?
- Yes, unit changes the word, for example unit="tokens".
- Is it accessible?
- The packs are a radiogroup with arrow key support, auto top-up is a real switch and the balance is announced politely.
