For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- A storefront checkout that takes a shopper from contact and shipping to payment beside the order total
- A one page pay screen, with typed shipping and card fields or a saved card confirmed by its CVV
- A prepaid AI token or usage credit purchase for a workspace, with billing details and no shipping
When not to use
- A business task in numbered steps, such as vendor intake or an invoice, with no cart: use the Wizard blocks
- Step markers and panel switching alone, wrapped around a form you already built: use the Stepper component
- First run account or workspace setup right after signup, with nothing to pay for: use the Onboarding blocks
Agent notes
- No block calls a payment API: the final button fakes success with
window.setTimeoutor has no handler, so submit the order from there - Card number and CVC are plain inputs with
cc-numberandcc-cscautofill; swap in your processor's hosted fields so raw card data stays off your app - Each page.tsx wraps the block in a
min-h-svhelement and the root component sets its own max width; remove both inside your own layout
Third-party API docs
- Sonner v2: API reference, docs, used by 5 of 7 blocks
- Motion v12: API reference, docs, used by 3 of 7 blocks (the docs follow the latest Motion, with no React API break since v12)
https://web.dev.reui.io/blocks/ecommerce/checkout.mdsearch({ query: "checkout", type: "block", category: "checkout" })Shadcn Checkout Blocks for Multi-Step and Express Payment Flows
Checkout is the page where layout mistakes cost money, so these blocks commit to structure: a step rail that tells the buyer where they are, a form column that only asks for what the current step needs, and an order summary that stays visible while they scroll.
Five of the seven run on the ReUI Stepper, usually as four-step flows for contact, delivery, payment and review. The other two are single-page: a two-pane express checkout that plays back saved contact, address and card rows behind a CVV field, and a two-column payment page with the order list beside the card form.
Validation states, promo code entry, tax and discount lines, and card, PayPal and Apple Pay options are all present in the markup. What you add is your payment provider and your own totals math.
All Checkout Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Sign-In Checkout Multi-Step Checkout with Stepper Progress and Sticky Order Summary
- Trust Strip Checkout Multi-step checkout form with stepper and sticky order summary
- AI Credit Checkout Multi-step AI token credit checkout with stepper and auto top-up controls
- Express Checkout Two-pane express checkout with saved details and order summary rail
- Order Review Checkout Four-step ecommerce checkout with stepper and order summary sidebar
- One-Page Checkout Two-column checkout with order summary and payment form
- Social Sign-In Checkout Multi-step checkout with stepper navigation and live order summary
Stepper-Driven Checkout Flows
The multi-step blocks share a spine: a Stepper header that marks completed, current and upcoming steps, one panel of fields at a time, and back and continue controls that gate progress on validation.
Step content differs by flow. Contact steps collect email and phone, delivery steps use saved-address Combobox pickers and a RadioGroup of delivery speeds with their fees, payment steps switch between card, PayPal and Apple Pay, and review steps replay the full order before the buyer commits.
One block adapts the same pattern to prepaid credit rather than physical goods: a three-step wizard to pick a provider, choose a token bundle with auto top-up and usage alerts, then pay. That is the flow to start from for billing, credit and top-up screens.
Express and Single-Page Checkout
Not every store wants four steps. Two blocks collapse the flow onto one screen for buyers whose details are already on file.
- A two-pane express checkout that shows saved contact, address and card as review rows, asks only for CVV, and hides a full new-card form behind a collapsible toggle.
- A two-column payment page pairing the product list and totals with shipping details, a card input with card-brand logos and an Apple Pay button.
- Both keep the order summary in view on desktop instead of pushing it below the fold, which is the single most common express checkout mistake.
Order Summary, Promo Codes, and Totals
- Sticky order summary rails holding subtotal, discount, tax, delivery and total while the form column scrolls.
- Promo code fields with applied-discount feedback, so the summary reflects the code without a page change.
- Badge pills for savings, free delivery and step status, with Alert banners for validation and payment errors.
- Frame panels on two of the flows if you prefer a single bordered surface over stacked shadcn cards.
- Payment method sets that include card fields, PayPal and Apple Pay, each with the fields that method actually needs.
Related Shadcn eCommerce Block Categories
Checkout only makes sense next to the screens on either side of it.
- Shopping Cart The step before payment: cart pages, mini-cart dropdowns and slide-out sheets with quantity steppers and totals.
- Receipt The step after payment: order confirmations and printable receipts that close the loop.
- Coupon Discount and promo UI for when the checkout promo field is only part of what you need.
- Product Detail Product pages with variant pickers and add-to-cart buttons that feed the cart.
- Product Card Catalog grids, carousels and quick-buy cards for the top of the same funnel.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Are these checkout blocks connected to a payment provider?
Can I change the number of steps?
How do I install a checkout block?
Does the order summary work on mobile?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.