Pro

Checkout Page React block for Tailwind CSS v4

Q: How do I install Checkout Page?

Run npx wingo-ui@latest add checkout-page. It also adds the Wingo UI items it builds on (Alert, Badge, Button, Carousel, Cart drawer and 19 more) and the npm packages motion and lucide-react. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/checkout-page.

v1.0.0Added in 1.0.0

A React checkout page from the cart to Order placed: an editable cart, four checkout steps and the order confirmation.

A slim three step bar under the header shows where you are (Cart, Delivery and payment, Confirmation). In the cart the steppers change quantities (hold to repeat, a stock hint at the limit, the trash at 1), the × or a swipe left on touch removes a line and leaves an undo row that counts down for 5 seconds, and Save for later moves a line to a saved list below with Move to cart and Delete. The free delivery bar fills as the cart grows and turns green at the threshold. Have a coupon? opens the code field: FALL15, FREESHIP, SAVE50 and BIG200 apply after a short check with a popping tick, EXPIRED is rejected with its date, and a code that stops applying after a quantity change is removed with a note. The summary, the savings badge and the total follow every change. Continue to delivery (or the phone bar with the total, shown while the summary button is off screen) opens the checkout: saved addresses or a new one with the state picker (Romanian counties and localities under a ro locale), a company invoice with the tax ID check, the delivery methods with the locker list, the payment methods, and the review with the terms. Back to cart returns with everything kept. Place order places it; the card ending 0002 is refused with the bank's message on the review step. The button turns into a check, the confirmation slides in with a bouncy tick, the thank you, the email, Track order, Continue shopping, an account hint for guests and the order tracker. You might also like is a swipeable rail whose Add to cart buttons add to the cart. Every stage change moves focus to its heading and is announced; stages slide in the direction you go, a fade under reduced motion. On phones the cart is one column, the checkout is a full screen app with its own footer and the confirmation buttons are full width.

Checkout Page is a Pro React block in the React blocks category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add checkout-page, together with Alert, Badge, Button, Carousel, Cart drawer and 19 more and the npm packages motion and lucide-react.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add checkout-page

Checkout Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CheckoutPage from @/components/blocks/checkout-page.

// app/(market)/cart/page.tsx (the shell lives in app/(market)/cart/layout.tsx as <MarketplaceShell variant="minimal">; mount <Toaster /> once there)
"use client"

import { useRouter } from "next/navigation"
import { CheckoutPage } from "@/components/blocks/checkout-page"

export default function CartPage() {
  const router = useRouter()
  return (
    <CheckoutPage
      onItemsChange={(items) => fetch("/api/cart", { method: "PUT", body: JSON.stringify(items) })}
      onPlaceOrder={async (value, totals) => {
        const response = await fetch("/api/orders", { method: "POST", body: JSON.stringify({ value, total: totals.total }) })
        if (!response.ok) throw new Error(await response.text())
        return (await response.json()) as { orderNumber: string }
      }}
      onTrackOrder={(orderNumber) => router.push(`/account/orders/${orderNumber}`)}
      onContinueShopping={() => router.push("/")}
    />
  )
}

Props

items
CartItem[]
The cart lines, controlled; pair with onItemsChange. CartItem comes from cart-drawer (price, compareAtPrice, quantity, maxQuantity, taxRate, image, variant, href).
defaultItems
CartItem[]
The starting cart, uncontrolled (CHECKOUT_PAGE_SAMPLE.items: the city bike $1,199, was $1,399, 2 × iPhone 14 case $79.90, the laptop stand $149 and the trail guide $64.90 at an 11% reduced tax rate).
onItemsChange
(items: CartItem[]) => void
Every quantity change, removal, save for later and add; the cart empties after an order.
stage
"cart" | "checkout" | "confirmation"
The stage, controlled; pair with onStageChange.
defaultStagedefault "cart"
"cart" | "checkout" | "confirmation"
The stage the page opens on. confirmation without a placed order shows order.
onStageChange
(stage: CheckoutStage) => void
Continue to delivery, Back to cart and a placed order.
checkout
CheckoutValue
The checkout form value, controlled (checkout-steps' CheckoutValue without the coupons, which come from the cart).
defaultCheckout
CheckoutValue
The starting form value. The signed-in buyer's email is prefilled unless guest.
onCheckoutChange
(value: CheckoutValue) => void
Every field of the checkout.
checkoutStep
"address" | "delivery" | "payment" | "review"
The checkout's step, controlled.
defaultCheckoutStepdefault "address"
"address" | "delivery" | "payment" | "review"
The step the checkout opens on (the demo fills the steps before it).
onCheckoutStepChange
(step: CheckoutStepId) => void
Continue, Back and the stepper.
coupons
Coupon[]
The valid codes (CHECKOUT_PAGE_SAMPLE.coupons: FALL15 15% up to $150, FREESHIP, SAVE50 from $300, BIG200 from $2,000), checked locally and rechecked when the cart changes.
onApplyCoupon
(code: string) => (CouponResult | Promise<CouponResult>)
The server check of a typed code. Default: a pretend 600 ms request over coupons that rejects EXPIRED with This coupon expired on August 31, 2026.
savedAddresses
CheckoutAddress[]
The buyer's addresses (Home: 1200 Market St, Apt. 4, San Francisco; Office: Summit Software Inc., 500 Howard St). Ignored for a guest.
deliveryMethods
DeliveryMethod[]
UPS Ground $19.99, Parcel locker $12.99, FedEx Home Delivery $17.99 and a free pickup in San Francisco. The cheapest paid one is the cart's delivery estimate.
lockers
CheckoutLocker[] or (methodId: string) => Promise<CheckoutLocker[]>
The locker list (Civic Center, Westfield Centre, Hayes Valley, Union Square), or a loader per locker method.
paymentMethods
PaymentMethod[]
Visa •••• 4242, Mastercard •••• 0002, Cash on delivery (+$4.99), Bank transfer (with the account) and 3 installments from $600. Methods without an icon get one by id (card, cash or ramburs, transfer, rate).
freeShippingThresholddefault 250
number
Courier and locker delivery are free from this much, after coupons; 0 hides the free delivery bar.
recommended
ListingData[]
The You might also like rail (CHECKOUT_PAGE_SAMPLE.recommended, 4 shop products with an add button). [] hides it.
guestdefault false
boolean
No saved addresses and no prefilled email; the confirmation adds the Create an account hint.
customerEmaildefault "anna.price@summitcrm.com"
string
The signed-in buyer's email, prefilled in the checkout.
onPlaceOrder
(value: CheckoutValue, totals: CartTotals) => (Promise<CheckoutPlaceResult | void> | CheckoutPlaceResult | void)
Places the order (CheckoutPlaceResult = { orderNumber: string }; totals.total includes delivery and the payment fee). A rejection shows its message on the review step. Default: a pretend 1.4 s request that returns #1042 and refuses the card ending 0002 with The bank declined the payment.
order
CheckoutOrder
What the confirmation shows when the page opens on it (CHECKOUT_PAGE_SAMPLE.order, #1042 with UPS Ground). A placed order replaces it.
onContinueShopping
() => void
Continue shopping on the confirmation. Default: a toast.
onTrackOrder
(orderNumber: string) => void
Track order on the confirmation. Default: a toast.
shopHrefdefault "/"
string
Browse listings in the empty cart.
termsHrefdefault "/terms"
string
The terms link of the review step's checkbox.
privacyHrefdefault "/privacy"
string
The privacy link of the review step's checkbox.
registerHrefdefault "/register"
string
Create account in the guest's account hint.
stickyBardefault true
boolean
Below 1024px in the cart, a bottom bar with the total and Continue while the summary's button is off screen.
ctaTonedefault "neutral"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
Continue to delivery, the checkout's Continue and Place order, the phone bar and Track order.
labels
Partial<CheckoutPageLabels>
Every visible string, English by default (DEFAULT_CHECKOUT_PAGE_LABELS; CHECKOUT_PAGE_LABELS_EN is the same set), counted ones as functions; nested cart, stepper, coupon, checkout, tracker, listingCard, carousel and stickyBar for the composed items.
localedefault "en-US"
string
Intl locale for prices, counts and dates. A ro locale switches the address region to Romanian counties with their localities.
currencydefault "USD"
string
The currency of every amount (the demo converts the sample to EUR).
now
Date | number
The confirmation's clock (the order time, the arrival days). Default: the live clock; the demo passes September 24, 2026, 4:40 PM.
tonedefault "neutral"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
The stage bar, the free delivery bar and the order tracker's milestones.
radiusdefault "md"
"sm" | "md" | "lg"
The panels 12 / 16 / 24px and the buttons, steppers and fields with them.
loadingdefault false
boolean
The cart, the summary and the rail as skeletons of their real shape.
animateIndefault true
boolean
Sections rise in once when the page mounts on the client (never over server HTML, never with reduced motion).
linkComponent
(props: LinkComponentProps) => ReactNode
The router link for the empty cart's action, the terms links and the account hint. Default: the provider's (the shell's), then <a>.
className
string
Classes for the root.
classNames
Partial<Record<"progress" | "header" | "freeShipping" | "lines" | "saved" | "aside" | "summary" | "recommended" | "empty" | "checkout" | "confirmation" | "tracker" | "account" | "stickyBar", string>>
Classes for the sections.

Parts

DEFAULT_CHECKOUT_PAGE_LABELS
constant
Every English string of the cart, the four checkout steps and the confirmation. Spread it and override what you translate.
CHECKOUT_PAGE_LABELS_EN
constant
An alias of DEFAULT_CHECKOUT_PAGE_LABELS, kept so older imports keep working.
createCheckoutPageSample
function
Builds the demo shop in USD or EUR: cart items, coupons, saved addresses, delivery methods, lockers, payment methods, recommendations, the customer and the placed order.
CHECKOUT_PAGE_SAMPLE
constant
The demo shop in USD. Replace it with your cart and checkout data.
CHECKOUT_PAGE_SAMPLE_EUR
constant
The same demo shop with prices in EUR.
CHECKOUT_PAGE_EUR_PER_USD
constant
The rounded euros per dollar rate the EUR sample is converted with.
CHECKOUT_PAGE_NOW
constant
The fixed "now" of the sample (September 24, 2026, 4:40 PM), so dates render the same on the server and the client.

Examples

Delivery step with a parcel locker

The checkout at its delivery step with Parcel locker picked and the locker list open.

Order placed

The bouncy check, the thank you and order #1042 tracked from Placed.

Empty cart

Your cart is empty with one action and the recommended products to start again.

Payment refused

Place the order with the Mastercard ending 0002: the bank refuses it and the review step shows why.

Guest, brand actions

No saved addresses, brand continue buttons and the account hint after the order.

Loading

The cart, the summary and the rail as skeletons of their real shape.

en-GB, EUR prices

en-GB formatting, euro prices and free delivery from €230.

Files

components/blocks/checkout-page.tsx
components/blocks/checkout-page-data.ts

FAQ

Is the React Checkout Page block free?

The preview, props and docs are free; copying the source needs a Pro plan. See plans.

How do I install Checkout Page?

Run npx wingo-ui@latest add checkout-page. It also adds the Wingo UI items it builds on (Alert, Badge, Button, Carousel, Cart drawer and 19 more) and the npm packages motion and lucide-react. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/checkout-page.

How does Checkout Page behave on phones?

On phones the cart is one column, the checkout is a full screen app with its own footer and the confirmation buttons are full width.

More React blocks

CRM Contact Page CRM Pipeline Page Error Pages Inbox Page Invoice Page KPI Dashboard

All 26 React blocks

Articles using this component

Order History Page Design: List, Detail and Actions
Build it: screens and appsNov 6, 20269 min read
Shadcn Ecommerce Template: Five Screens That Work on Phones
Build it: screens and appsNov 6, 202611 min read
React Checkout Page: Cart, Steps, Coupons and a Pay Bar
Build it: screens and appsOct 16, 202612 min read

Pro

Checkout Page React block for Tailwind CSS v4

v1.0.0Added in 1.0.0

A React checkout page from the cart to Order placed: an editable cart, four checkout steps and the order confirmation.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add checkout-page

Checkout Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CheckoutPage from @/components/blocks/checkout-page.

// app/(market)/cart/page.tsx (the shell lives in app/(market)/cart/layout.tsx as <MarketplaceShell variant="minimal">; mount <Toaster /> once there)
"use client"

import { useRouter } from "next/navigation"
import { CheckoutPage } from "@/components/blocks/checkout-page"

export default function CartPage() {
  const router = useRouter()
  return (
    <CheckoutPage
      onItemsChange={(items) => fetch("/api/cart", { method: "PUT", body: JSON.stringify(items) })}
      onPlaceOrder={async (value, totals) => {
        const response = await fetch("/api/orders", { method: "POST", body: JSON.stringify({ value, total: totals.total }) })
        if (!response.ok) throw new Error(await response.text())
        return (await response.json()) as { orderNumber: string }
      }}
      onTrackOrder={(orderNumber) => router.push(`/account/orders/${orderNumber}`)}
      onContinueShopping={() => router.push("/")}
    />
  )
}

Props

items
CartItem[]
The cart lines, controlled; pair with onItemsChange. CartItem comes from cart-drawer (price, compareAtPrice, quantity, maxQuantity, taxRate, image, variant, href).
defaultItems
CartItem[]
The starting cart, uncontrolled (CHECKOUT_PAGE_SAMPLE.items: the city bike $1,199, was $1,399, 2 × iPhone 14 case $79.90, the laptop stand $149 and the trail guide $64.90 at an 11% reduced tax rate).
onItemsChange
(items: CartItem[]) => void
Every quantity change, removal, save for later and add; the cart empties after an order.
stage
"cart" | "checkout" | "confirmation"
The stage, controlled; pair with onStageChange.
defaultStagedefault "cart"
"cart" | "checkout" | "confirmation"
The stage the page opens on. confirmation without a placed order shows order.
onStageChange
(stage: CheckoutStage) => void
Continue to delivery, Back to cart and a placed order.
checkout
CheckoutValue
The checkout form value, controlled (checkout-steps' CheckoutValue without the coupons, which come from the cart).
defaultCheckout
CheckoutValue
The starting form value. The signed-in buyer's email is prefilled unless guest.
onCheckoutChange
(value: CheckoutValue) => void
Every field of the checkout.
checkoutStep
"address" | "delivery" | "payment" | "review"
The checkout's step, controlled.
defaultCheckoutStepdefault "address"
"address" | "delivery" | "payment" | "review"
The step the checkout opens on (the demo fills the steps before it).
onCheckoutStepChange
(step: CheckoutStepId) => void
Continue, Back and the stepper.
coupons
Coupon[]
The valid codes (CHECKOUT_PAGE_SAMPLE.coupons: FALL15 15% up to $150, FREESHIP, SAVE50 from $300, BIG200 from $2,000), checked locally and rechecked when the cart changes.
onApplyCoupon
(code: string) => (CouponResult | Promise<CouponResult>)
The server check of a typed code. Default: a pretend 600 ms request over coupons that rejects EXPIRED with This coupon expired on August 31, 2026.
savedAddresses
CheckoutAddress[]
The buyer's addresses (Home: 1200 Market St, Apt. 4, San Francisco; Office: Summit Software Inc., 500 Howard St). Ignored for a guest.
deliveryMethods
DeliveryMethod[]
UPS Ground $19.99, Parcel locker $12.99, FedEx Home Delivery $17.99 and a free pickup in San Francisco. The cheapest paid one is the cart's delivery estimate.
lockers
CheckoutLocker[] or (methodId: string) => Promise<CheckoutLocker[]>
The locker list (Civic Center, Westfield Centre, Hayes Valley, Union Square), or a loader per locker method.
paymentMethods
PaymentMethod[]
Visa •••• 4242, Mastercard •••• 0002, Cash on delivery (+$4.99), Bank transfer (with the account) and 3 installments from $600. Methods without an icon get one by id (card, cash or ramburs, transfer, rate).
freeShippingThresholddefault 250
number
Courier and locker delivery are free from this much, after coupons; 0 hides the free delivery bar.
recommended
ListingData[]
The You might also like rail (CHECKOUT_PAGE_SAMPLE.recommended, 4 shop products with an add button). [] hides it.
guestdefault false
boolean
No saved addresses and no prefilled email; the confirmation adds the Create an account hint.
customerEmaildefault "anna.price@summitcrm.com"
string
The signed-in buyer's email, prefilled in the checkout.
onPlaceOrder
(value: CheckoutValue, totals: CartTotals) => (Promise<CheckoutPlaceResult | void> | CheckoutPlaceResult | void)
Places the order (CheckoutPlaceResult = { orderNumber: string }; totals.total includes delivery and the payment fee). A rejection shows its message on the review step. Default: a pretend 1.4 s request that returns #1042 and refuses the card ending 0002 with The bank declined the payment.
order
CheckoutOrder
What the confirmation shows when the page opens on it (CHECKOUT_PAGE_SAMPLE.order, #1042 with UPS Ground). A placed order replaces it.
onContinueShopping
() => void
Continue shopping on the confirmation. Default: a toast.
onTrackOrder
(orderNumber: string) => void
Track order on the confirmation. Default: a toast.
shopHrefdefault "/"
string
Browse listings in the empty cart.
termsHrefdefault "/terms"
string
The terms link of the review step's checkbox.
privacyHrefdefault "/privacy"
string
The privacy link of the review step's checkbox.
registerHrefdefault "/register"
string
Create account in the guest's account hint.
stickyBardefault true
boolean
Below 1024px in the cart, a bottom bar with the total and Continue while the summary's button is off screen.
ctaTonedefault "neutral"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
Continue to delivery, the checkout's Continue and Place order, the phone bar and Track order.
labels
Partial<CheckoutPageLabels>
Every visible string, English by default (DEFAULT_CHECKOUT_PAGE_LABELS; CHECKOUT_PAGE_LABELS_EN is the same set), counted ones as functions; nested cart, stepper, coupon, checkout, tracker, listingCard, carousel and stickyBar for the composed items.
localedefault "en-US"
string
Intl locale for prices, counts and dates. A ro locale switches the address region to Romanian counties with their localities.
currencydefault "USD"
string
The currency of every amount (the demo converts the sample to EUR).
now
Date | number
The confirmation's clock (the order time, the arrival days). Default: the live clock; the demo passes September 24, 2026, 4:40 PM.
tonedefault "neutral"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
The stage bar, the free delivery bar and the order tracker's milestones.
radiusdefault "md"
"sm" | "md" | "lg"
The panels 12 / 16 / 24px and the buttons, steppers and fields with them.
loadingdefault false
boolean
The cart, the summary and the rail as skeletons of their real shape.
animateIndefault true
boolean
Sections rise in once when the page mounts on the client (never over server HTML, never with reduced motion).
linkComponent
(props: LinkComponentProps) => ReactNode
The router link for the empty cart's action, the terms links and the account hint. Default: the provider's (the shell's), then <a>.
className
string
Classes for the root.
classNames
Partial<Record<"progress" | "header" | "freeShipping" | "lines" | "saved" | "aside" | "summary" | "recommended" | "empty" | "checkout" | "confirmation" | "tracker" | "account" | "stickyBar", string>>
Classes for the sections.

Parts

DEFAULT_CHECKOUT_PAGE_LABELS
constant
Every English string of the cart, the four checkout steps and the confirmation. Spread it and override what you translate.
CHECKOUT_PAGE_LABELS_EN
constant
An alias of DEFAULT_CHECKOUT_PAGE_LABELS, kept so older imports keep working.
createCheckoutPageSample
function
Builds the demo shop in USD or EUR: cart items, coupons, saved addresses, delivery methods, lockers, payment methods, recommendations, the customer and the placed order.
CHECKOUT_PAGE_SAMPLE
constant
The demo shop in USD. Replace it with your cart and checkout data.
CHECKOUT_PAGE_SAMPLE_EUR
constant
The same demo shop with prices in EUR.
CHECKOUT_PAGE_EUR_PER_USD
constant
The rounded euros per dollar rate the EUR sample is converted with.
CHECKOUT_PAGE_NOW
constant
The fixed "now" of the sample (September 24, 2026, 4:40 PM), so dates render the same on the server and the client.

Examples

Delivery step with a parcel locker

The checkout at its delivery step with Parcel locker picked and the locker list open.

Order placed

The bouncy check, the thank you and order #1042 tracked from Placed.

Empty cart

Your cart is empty with one action and the recommended products to start again.

Payment refused

Place the order with the Mastercard ending 0002: the bank refuses it and the review step shows why.

Guest, brand actions

No saved addresses, brand continue buttons and the account hint after the order.

Loading

The cart, the summary and the rail as skeletons of their real shape.

en-GB, EUR prices

en-GB formatting, euro prices and free delivery from €230.

Files

components/blocks/checkout-page.tsx
components/blocks/checkout-page-data.ts

FAQ

Is the React Checkout Page block free?

The preview, props and docs are free; copying the source needs a Pro plan. See plans.

How do I install Checkout Page?

How does Checkout Page behave on phones?

On phones the cart is one column, the checkout is a full screen app with its own footer and the confirmation buttons are full width.

More React blocks

CRM Contact Page CRM Pipeline Page Error Pages Inbox Page Invoice Page KPI Dashboard

All 26 React blocks

Articles using this component

Order History Page Design: List, Detail and Actions
Build it: screens and appsNov 6, 20269 min read
Shadcn Ecommerce Template: Five Screens That Work on Phones
Build it: screens and appsNov 6, 202611 min read
React Checkout Page: Cart, Steps, Coupons and a Pay Bar
Build it: screens and appsOct 16, 202612 min read

Checkout Page React block for Tailwind CSS v4

Add to a project

Usage

Props

Parts

DEFAULT_CHECKOUT_PAGE_LABELS

CHECKOUT_PAGE_LABELS_EN

createCheckoutPageSample

CHECKOUT_PAGE_SAMPLE

CHECKOUT_PAGE_SAMPLE_EUR

CHECKOUT_PAGE_EUR_PER_USD

CHECKOUT_PAGE_NOW

Examples

Delivery step with a parcel locker

Order placed

Empty cart

Payment refused

Guest, brand actions

Loading

en-GB, EUR prices

Dependencies

Files

FAQ

Is the React Checkout Page block free?

How do I install Checkout Page?

How does Checkout Page behave on phones?

See also

More React blocks

Articles using this component

Checkout Page React block for Tailwind CSS v4

Add to a project

Usage

Props

Parts

DEFAULT_CHECKOUT_PAGE_LABELS

CHECKOUT_PAGE_LABELS_EN

createCheckoutPageSample

CHECKOUT_PAGE_SAMPLE

CHECKOUT_PAGE_SAMPLE_EUR

CHECKOUT_PAGE_EUR_PER_USD

CHECKOUT_PAGE_NOW

Examples

Delivery step with a parcel locker

Order placed

Empty cart

Payment refused

Guest, brand actions

Loading

en-GB, EUR prices

Dependencies

Files

FAQ

Is the React Checkout Page block free?

How do I install Checkout Page?

How does Checkout Page behave on phones?

See also

More React blocks

Articles using this component