Contact, shipping, delivery and payment on a single page beside a sticky order summary. Card numbers format as you type and pass a Luhn check, a progress rail fills as each part becomes valid, and a success state replaces the form.
npx shadcn@latest add https://hyperblur.dev/r/checkout-one-page.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-one-page.tsx.
import { CheckoutOnePage } from "@/components/hyperblur/checkout-one-page"
<CheckoutOnePage onSubmit={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Northwind Supply" | Store name in the top bar. |
| title | string | "Checkout" | Page heading. |
| items | { name: string; variant: string; price: number; quantity: number; hue: number }[] | 3 items | Cart lines. hue tints the gradient thumbnail. |
| deliveryOptions | { id: string; label: string; detail: string; price: number }[] | Standard, Express, Next day | Delivery methods. A price of 0 shows Free. |
| defaultDelivery | string | Id of the delivery option selected first. Defaults to the first option. | |
| countries | string[] | 5 countries | Options for the country select. |
| currency | string | "USD" | ISO currency code for all amounts. |
| taxRate | number | 0.0825 | Tax rate applied to the subtotal. |
| onSubmit | (values: CheckoutOnePageValues) => void | Called after a valid submit with contact, address, delivery id, method, card brand, last four digits and total. The full card number is never passed. | |
| accent | string | "#2f7bff" | Progress, focus and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |