Skip to content
38

E-commerce.

E-commerce sections: product grids, carts and checkout layouts with wishlists, promo codes and live totals.

4 blocks, live at full size, install from here

01 / 04Product grid, filter pills, cart count

Ecommerce 01

Product grid with category filter pills, sale and new badges, wishlist toggles, star ratings, compare-at pricing and add-to-cart buttons that update a live cart count.

npx shadcn@latest add https://hirael.com/r/ecommerce-01.json

02 / 04Cart rows, promo code, live totals

Ecommerce 02

Shopping cart with capped quantity steppers, animated line-item removal, promo-code validation, a free-shipping threshold, live totals, a checkout that confirms with an order number, and an empty-cart state.

npx shadcn@latest add https://hirael.com/r/ecommerce-02.json

03 / 04Gallery, Stock-aware sizes, Add to cart

Ecommerce 03

Product detail page with a thumbnail gallery, colour swatches, a size grid that knows what is sold out in each colour, a stock-capped quantity stepper, add to cart, and details in an accordion.

npx shadcn@latest add https://hirael.com/r/ecommerce-03.json

04 / 04Live counts, Filter chips, Mobile sheet

Ecommerce 04

Category page with a sticky filter sidebar (category counts that react to the other filters, price range, colour, stock, rating), removable filter chips, sorting, an empty state, and a filter sheet on small screens.

npx shadcn@latest add https://hirael.com/r/ecommerce-04.json