Solid storefront blocks.

They are 100 React ecommerce storefront sections, in 13 groups: product page, facts and care, reviews and proof, browse and search, deals and prices, bundles and sets, stock and availability, bag and saved, checkout steps, pay, tax and shipping, your orders, returns and help, rewards and account. They follow a shopper from the product page to the bag, checkout, orders and returns.

Product Variants Storefront picks a material, colour and width with stock per combination, Product Gallery Storefront is an inspect view with three angles and zoom, and Size Guide Storefront names a size from chest and waist measurements. For finding things, Collection Filter Storefront has a facet rail with live counts.

Cart Storefront is a bag with quantity steppers and a subtotal, Checkout Storefront splits an order into parcels, Payment Methods Storefront tests the ways to pay against a basket total, and Order Tracking Storefront looks up a parcel by order number and email.

The shop, its products and its orders are invented and typed in the file, prices are worked out in whole cents, and the products are drawn rather than photographed. Nothing is for sale: the blocks say so where a button would place an order.

In Cart Storefront the quantity stepper never goes below 1 or above the stock typed for that tool, Remove leaves the row as Removed with an Undo, and the subtotal is worked out in whole cents. Keep the cart in your own store or session and render it through the block's lines; the Checkout button is where you go on to your checkout.

Shipping Calculator Storefront matches a postal code to a zone with a typed prefix table, then lists Economy, Standard and Express with a price in cents and an arrival date from the zone's days, moving weekends to Monday. The rates are made up. Replace the table with your carrier or shipping-rate API and keep the arrival logic for display.

Payment Methods Storefront does not ask for a card number: it lists each method's fee and limit against a basket total and shows Available or why not. Take the card in your payment provider's hosted fields, and feed the block only the methods and limits your provider enables.

Collection Filter Storefront shows a count beside every option, worked out as how many products it would show with the other filters kept, and keeps zero visible. Do the same on the server for a large catalogue: return the products and the facet counts together and render them through the rail and grid.

Order Tracking Storefront checks the order number and the email against three typed demo orders and shows a five-step list whose times come from carrier events. Replace the lookup with a request to your order system, and show Not yet for steps without an event, as the block does.

This page lists 100 of the category's 100 storefront 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 storefront 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/storefront-abandoned-cart-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/storefront-abandoned-cart-recovery.json for Abandoned Cart Recovery Storefront. 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: 13 kinds of storefront block, led by browse and search (13), facts and care (11), checkout steps (10) and product page (8), and sort by popular or name. A good first look: Abandoned Cart Recovery Storefront, Address Book Storefront and Age Verification Storefront. 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 storefront 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 product pages, discovery and offers and cart and checkout kinds.

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

Each storefront 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 storefront 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 storefront 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 storefront block, read it with get_block and install it on your Solid stack.

Pass `category: "storefront"` to search_blocks to search only the 100 storefront blocks, or to list_blocks for the 13 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", "storefront", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.