Sale
Intermediate~40 minutes8 steps
Build a storefront
From a collection page to a confirmed order. These are the screens in the order a customer meets them, which is also the order they are worth building in.
Take all 8 at once
npx hoverlab add product-grid product-filter-sidebar product-gallery product-buy-box cart-drawer checkout-form order-summary-panel order-confirmationOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-storefront.jsonThis path is a published registry item — one name that pulls in all 8 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
The collection page. Everything else is downstream of someone finding a product they like.
- 2
The moment there are more than a dozen products. Filters are what turn a grid into a store.
- 3
The product page starts here — for physical goods the images are the pitch.
- 4
Price, variants and the add-to-cart button. The single highest-stakes component in the whole flow.
- 5
Confirmation without navigation. Sending someone to a full cart page after every add is how carts get abandoned.
- 6
Address and payment, with the field ordering and autofill hints that decide whether this converts on a phone.
- 7
What they are about to pay, beside the form rather than a scroll away.
- 8
The receipt screen. It closes the loop, and it is the natural place to ask for the next thing.
When you are done
The Storefront template ships these already routed, with the cart state wired between them.