Solid checkout blocks.

100 checkout and cart sections for a React store: cart lines and screens, codes and rewards, totals and tax, addresses, shipping, payment methods, subscriptions, bookings, special purchases, errors and the order that follows. The gallery sorts them into 14 groups: Cart lines, Cart screens, Upsells and add-ons, Codes and rewards, Summary and totals, Buyer and addresses, Shipping and pickup, Payment methods, Subscriptions and plans, Layouts and flows, Bookings and tickets, Special purchases, Trust and errors, After the order. Each one is a section file with typed sample products and prices that you replace.

For a whole flow pick a layout first: Multi-Step Checkout, Single Page Checkout or Accordion Steps Checkout. Then add the steps you need: Cart Review Checkout for the lines, Shipping Options Checkout for delivery, Payment Methods Checkout for payment and Order Confirmation Checkout for the end.

No. The blocks are the interface only: nothing is charged, shipped or saved, and there is no payment SDK in them. They check a test card with a Luhn sum, and 4242 4242 4242 4242 passes with any future expiry in the blocks that take a card. The places for your payment provider are marked by comments in the handlers, such as "Hand the card to your payment provider's hosted fields here; this demo keeps the brand and the last four and drops every digit."

Subscription Checkout, Free Trial Checkout, Membership Checkout and Team Seats Checkout are in the Subscriptions and plans group, and Subscription Management Checkout lets a customer change the cadence, skip, pause or cancel each subscription in one table. Bookings and tickets has Event Tickets Checkout and Hotel Reservation Checkout.

Never let card digits reach your own code. The card fields in these blocks are checked in the browser only to show validation, so replace them with the fields your payment provider hosts (an iframe or element the provider mounts), and call the provider where the handler's comment says to. The wallet buttons in Express Checkout open nothing; wire them to your provider's own payment sheet.

Each block keeps its lines in a typed array at the top of the file, such as LINES in Cart Review Checkout, with prices in whole cents. Replace that array with what your cart API returns, keep the cents, and the subtotal, line totals and the button labels are worked out from it. The quantity stepper goes from 1 to 9 there, so change those bounds to your stock limits.

Promo Code Checkout holds its codes in a PROMOS array with an amount, a target (items or shipping), an expiry date and a minimum spend, and it explains why a code does not apply. Move that lookup to your server so a code cannot be read from the page, and return the same fields. Codes that stack are in Coupon Stacking Checkout, and Gift Card Checkout and Loyalty Points Checkout cover balances and points.

Tax Calculator Checkout builds tax per jurisdiction from made-up example rates, rounded half up per line in whole cents, and Multi-Currency Checkout converts from US cents with a typed rate that is dated rather than live. Both say a real shop reads these from a tax service or its payment provider. Replace the typed tables with that call and keep the whole-cents arithmetic.

Error Validation Checkout shows field errors keyed by field, with one alert that lists the fields as buttons that move focus to them, and a separate service error with Retry that keeps what was typed. Payment Failed Checkout adds a limit of tries and a wait before the next one. Return your server's errors in the same shape and the blocks show them.

This page lists 100 of the category's 100 checkout blocks for Solid. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Solid checkout blocks are the React ones ported to Solid, on Ark UI's Solid primitives. They keep the layout, the copy and the theme tokens, and install with shadcn (/r/solid/checkout-abandoned-recovery.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Solid needs solid-js @ark-ui/solid lucide-solid installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn@latest add` with the block's registry URL, such as /r/solid/checkout-abandoned-recovery.json for Abandoned Cart Recovery Checkout. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of checkout block, led by cart lines (10), payment methods (10), cart screens (8) and upsells and add-ons (8), and sort by popular or name. A good first look: Abandoned Cart Recovery Checkout, Accessibility Options Checkout and Accordion Steps Checkout. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a checkout block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the cart and offers, pricing and totals and buyer and delivery kinds.

Open its page and use the full-screen viewer (/view/checkout/solid/abandoned-recovery) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each checkout block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the checkout blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 checkout blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a checkout block, read it with get_block and install it on your Solid stack.

Pass `category: "checkout"` to search_blocks to search only the 100 checkout blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "checkout", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.