Shadcn UI Ecommerce Hero Block
EcommerceHero7 is a full-height carousel built with shadcn/ui. Each slide fills the viewport with a background image or muted looping video and a dark overlay. Text and primary CTA sit in one area while a detailed product card sits alongside, including category link, badges, star rating with review count, image carousel with thumbnails, price, wishlist and cart actions, and optional secondary links. The main carousel advances on autoplay with controls to move between campaigns.
Visual weight sits on the media: large serif or display-friendly headings on video slides, cards use neutral surfaces and tight product metadata. The in-card image carousel adds a second layer of motion inside the hero. Icon buttons and badges read as dense commerce UI.
Highly complex: multiple slides each need video or photo assets, full product objects with several images, reviews, and pricing. This is closer to a storefront spotlight than a simple hero. The combination of autoplay hero and nested product gallery is the distinctive part.
Expect horizontal scrolling on small screens with stacked text and card, depending on breakpoint rules in the implementation.
Dependencies
| Package | Type |
|---|---|
| embla-carousel-autoplay | NPM |
| lucide-react | NPM |
| react | NPM |
price @shadcnblocks | Registry |
rating @shadcnblocks | Registry |
badge @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
carousel @shadcn | Registry |