Credit pack pricing with four selectable cards that tilt toward the pointer, a best value ribbon, per-credit prices and savings, a purchase bar and a three-line FAQ strip.
Pay as you go
No subscription. Every export, upscale and render draws from one balance, and bigger packs cost less per credit.
npx shadcn@latest add https://hyperblur.dev/r/pricing-credits.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-credits.tsx.
import { PricingCredits } from "@/components/hyperblur/pricing-credits"
<PricingCredits onPurchase={(pack) => console.log(pack.credits)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Pay as you go" | Label with a coin mark above the title. Empty hides it. |
| title | string | "Buy credits once, render whenever you want" | Section heading. |
| subtitle | string | Paragraph next to the heading. | |
| packs | { name: string; credits: number; price: number; bestValue?: boolean }[] | 500, 2,000, 6,000, 20,000 | Credit packs. Savings are computed against the first pack. bestValue adds the ribbon and is selected by default. |
| currency | string | "$" | Currency symbol. |
| usageLabel | string | "4K renders" | What credits buy, shown as About N usageLabel. |
| creditsPerUse | number | 5 | Credits one use costs, for the About line. |
| value | number | Controlled selected pack index. Pair with onPackChange. | |
| defaultValue | number | Initial selected index when uncontrolled. Defaults to the best value pack. | |
| onPackChange | (index: number, pack: CreditPack) => void | Called when a pack is selected by click or arrow keys. | |
| onPurchase | (pack: CreditPack) => void | Called when the buy button is pressed. | |
| buyLabel | string | "Buy credits" | Buy button text, followed by the price. |
| bestValueLabel | string | "Best value" | Ribbon text. |
| faqs | { question: string; answer: string }[] | 3 items | One-line questions under the packs. Empty array hides the strip. |
| accent | string | "#f5a524" | Ribbon, selection and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |