For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
- A closing band that asks for a signup, an email or a sales call, with nothing to buy: use the CTA blocks
- One offer built around a promo code the shopper copies before checkout: use the Coupon blocks
Agent notes
Herotakes no props, so its copy, links and photos are hardcoded in components/hero.tsx; lift them into props to reuse it- Every
hrefis 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-svhmain;Herostarts at h2, so give your page its own h1
Markdown
https://web.dev.reui.io/blocks/ecommerce/shop-hero.mdMCP
search({ query: "shop hero", type: "block", category: "shop-hero" })Shadcn Shop Hero Blocks: Storefront Heroes, Collection Grids and Deal Banners
A shop hero has to sell in one screen: a headline, a reason to act and the products or collections behind it. These blocks ship 8 ways to do that, from a product mosaic with per-tile Add to Cart to a 2x2 collection quilt, on the same Card, Badge and Button the rest of the store uses so the hero and the catalog match.
All Shop Hero Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Live Cart Hero Storefront shop hero with asymmetric 3-tile product mosaic and live per-tile Add to Cart
- Bento Shop Hero Bento-grid shop hero with featured campaign tile, quick-add product tiles, and sale promo block
- Countdown Deal Hero Ecommerce shop hero with full-bleed featured deal banner, countdown, and three promo tiles
- Category Shop Hero Shop By Category ecommerce hero with editorial header and a four-tile image category grid
- Dual Collection Hero Dual-Collection Shop Hero with Two Side-by-Side Full-Image Story Panels
- Seasonal Lookbook Hero Editorial split shop hero with brand stamp, dual Shop The Edit and Sale CTAs, and collection image
- Collection Switcher Collection Switcher Shop Hero with Tabbed Thumbnail Chips and Full-Bleed Editorial Panels
- Collection Quilt Edge-to-edge 2x2 collection quilt shop hero with full-bleed photo tiles and color-coded status pills
What the Shop Hero blocks cover
eCommerce screens, each a full block with fixture data:
- Storefront shop hero with asymmetric 3-tile product mosaic and live per-tile Add to Cart
- Bento-grid shop hero with featured campaign tile, quick-add product tiles, and sale promo block
- Ecommerce shop hero with full-bleed featured deal banner, countdown, and three promo tiles
- Shop By Category ecommerce hero with editorial header and a four-tile image category grid
- Dual-Collection Shop Hero with Two Side-by-Side Full-Image Story Panels
- Editorial split shop hero with brand stamp, dual Shop The Edit and Sale CTAs, and collection image
- Collection Switcher Shop Hero with Tabbed Thumbnail Chips and Full-Bleed Editorial Panels
- Edge-to-edge 2x2 collection quilt shop hero with full-bleed photo tiles and color-coded status pills
Built from
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Which shop hero should I start with?
Shop Hero 1 for a product-led store (a mosaic with Add to Cart on each tile), Shop Hero 4 to send people into categories, Shop Hero 3 for a sale with a countdown, and Shop Hero 7 when you want one hero to switch between collections.
How do I install a Shop Hero block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Shop Hero blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.