# Live Cart Hero block

> Storefront shop hero with asymmetric 3-tile product mosaic and live per-tile Add to Cart

Ecommerce landing hero pairing shop positioning, dual CTAs and a curator row with a 1-up plus 2-stacked product mosaic, sale and compare-at pricing, per-tile add-to-cart, and a cart counter that updates live. ReUI Badge, shadcn Item, Button, Avatar.

- Type: Pro block
- Category: [Shop Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-1
- MCP: `get_block("shop-hero-1")`
- Built with: Avatar, Badge, Button, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A brand top bar whose cart count climbs as shoppers add from a 3 product mosaic, plus a curator byline and a category link row

## Agent notes

- `cart` is local `useState` and `cartCount` is derived from it with `useMemo`, so the top bar total resets on reload; call your cart store from `addToCart`
- Replace `HERO_PRODUCT`, `COMPANION_PRODUCTS`, `CURATOR`, `SHOP_FEATURES` and `SHOP_CATEGORIES`, the sample bags, byline, perks and link row
- The brand mark, `Badge` eyebrow, headline, lede and both CTA labels are literals inside `Hero`, not constants, so edit the markup

## When not to use

- A page listing line items, quantities and a running total before checkout: use the [Shopping Cart blocks](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)
- A catalog of many products laid out for browsing at length: use the [Product Grid blocks](https://web.dev.reui.io/blocks/ecommerce/product-grid.md)

## Install

```bash
npx shadcn@latest add @reui/shop-hero-1
```

## About Shop Hero blocks

### When to use

- The opening screen of a storefront home page, told through a season, collection or brand story
- A sale or new drop launch that puts the offer, release status and shop links up front
- A first screen that routes shoppers into categories, collections or a few featured products

### When not to use

- The top of a software landing page led by an app console, code card or logo cloud: use the [Hero blocks](https://web.dev.reui.io/blocks/marketing/hero.md)
- A closing band that asks for a signup, an email or a sales call, with nothing to buy: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- One offer built around a promo code the shopper copies before checkout: use the [Coupon blocks](https://web.dev.reui.io/blocks/ecommerce/coupon.md)

### Agent notes

- `Hero` takes no props, so its copy, links and photos are hardcoded in components/hero.tsx; lift them into props to reuse it
- Every `href` is a hash placeholder and every photo hotlinks images.unsplash.com; point them at your own routes and hosted images
- The only h1 is a sr-only one in each page.tsx, inside a `min-h-svh` main; `Hero` starts at h2, so give your page its own h1

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.