Back to changelog

Ecommerce Blocks

October 18, 2026

Feature

Added a full set of ecommerce blocks, available under Blocks in six new docs pages: Ecommerce - Hero, Product List, Product Detail, Cart, Checkout and Orders. Every block takes typed props, keeps its own cart, filter and form state, and uses a fictional store with placeholder photos so you can swap in your own data.

Hero

  • Photo collage, category tiles, full bleed image, featured product spotlight, sale countdown and an auto rotating promo slider

Product list

  • Product grid with wishlist and quick add, sidebar filters with sorting and pagination, a top filter bar, grid and list toggle, collection tiles, a quick view dialog, a recommendations carousel and a load more grid with skeletons

Product detail

  • Thumbnail gallery with variant pickers, sticky buy box with accordion details, photo mosaic with tabs, quantity stepper with cart confirmation
  • Customer reviews with a rating breakdown and a validated review form, complete the look, frequently bought together and a size guide with a sticky mobile bar

Cart

  • Cart drawer, full cart page, free shipping progress with promo codes, empty cart, header mini cart and add on suggestions

Checkout

  • Single page and multi step checkouts, payment form with a live card preview, delivery method cards, express checkout with guest and sign in, a country aware address form, order review and a two column layout with a collapsible mobile summary
  • Forms use vee-validate with yup and masked card fields. They are demos and never send card data anywhere

Orders

  • Order confirmation, tracking timeline, order history table and cards, order detail and a return request form

MCP

  • New storefront, product-page, checkout and orders page plans, also picked up by plan-app
  • Block docs links and search keywords cover the six new categories
blocks
mcp