A three step checkout with an animated step header, a shipping form, delivery method cards with prices, payment options, a review screen and a live order summary.
npx shadcn@latest add https://hyperblur.dev/r/shop-checkout-steps.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/shop-checkout-steps.tsx.
import { ShopCheckoutSteps } from "@/components/hyperblur/shop-checkout-steps"
<ShopCheckoutSteps onComplete={(r) => console.log(r.total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Checkout" | Heading above the steps. |
| items | { name: string; variant?: string; price: number; quantity: number; tone?: string }[] | 3 sample items | Lines in the order summary. |
| deliveryOptions | { id: string; label: string; eta: string; price: number }[] | Standard, Express, Overnight | Delivery method cards. A price of 0 shows Free. |
| defaultDelivery | string | second option | Id of the initially selected delivery option. |
| defaultShipping | Partial<{ email; firstName; lastName; address; city; postal; country }> | Prefilled shipping fields. | |
| countries | string[] | 5 countries | Options in the country select. |
| currency | string | "$" | Currency symbol placed before amounts. |
| taxRate | number | 0.0725 | Tax rate applied to the subtotal. |
| orderNumber | string | "NW-20418" | Order number shown on the confirmation. |
| onStepChange | (step: number) => void | Called when the step changes, 0 to 2. | |
| onComplete | (result: { shipping; delivery; payment: "card" | "bank" | "later"; total: number }) => void | Called after Place order succeeds. | |
| accent | string | "#7c5cff" | Accent for the step header, selected cards and buttons. |