D. E-commerce

Checkout Flow

Single-page and multi-step checkout, payment methods, address book, order review and the guest-vs-sign-in gate.

6 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add commerce/checkout

01Single-page checkout

Uses: StoreHeader · TextField · RadioGroup · LineItem · Button

components/blocks/commerce/checkout/01-single-page.tsx

Uses: CheckoutSteps · TextField · RadioGroup · Button

components/blocks/commerce/checkout/02-shipping-step.tsx

Uses: CheckoutSteps · PaymentMethods · TextField · RadioGroup · Button

components/blocks/commerce/checkout/03-payment-methods.tsx

Uses: CheckoutSteps · RadioGroup · Badge · Button

components/blocks/commerce/checkout/04-address-book.tsx

Uses: CheckoutSteps · LineItem · Badge · Button

components/blocks/commerce/checkout/05-review-order.tsx

Uses: StoreHeader · TextField · PasswordField · Button

components/blocks/commerce/checkout/06-guest-gate.tsx