One centered card that walks through Details, Payment and Confirm with a glowing progress track. Steps slide in from the direction you travel, each step validates before moving on, and the review step links back to edit.
Cancel any time from workspace settings. Prices in USD.
npx shadcn@latest add https://hyperblur.dev/r/checkout-stepper-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-stepper-card.tsx.
import { CheckoutStepperCard } from "@/components/hyperblur/checkout-stepper-card"
<CheckoutStepperCard onComplete={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| product | string | "Relay" | Product name in the card header. |
| plan | string | "Team plan" | Plan name in the header and review. |
| monthlyPrice | number | 18 | Price per seat per month on monthly billing. |
| yearlyPrice | number | 15 | Price per seat per month on yearly billing. |
| defaultSeats | number | 5 | Initial seat count. |
| defaultStep | number | 0 | Step shown first, from 0 to 2. |
| currency | string | "USD" | ISO currency code. |
| onStepChange | (step: number) => void | Called when the visible step changes. | |
| onComplete | (values: CheckoutStepperValues) => void | Called on confirm with name, email, company, seats, cycle, card brand, last four digits and total. | |
| accent | string | "#06b6d4" | Track, focus and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |