Product Card Grid

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/ecommerce/ecommerce15.tsx instead.

Usage

The file also exports ecommerce15Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Ecommerce15, ecommerce15Demo } from "@/components/blocks/ecommerce/ecommerce15";

export default function Page() {
  return <Ecommerce15 {...ecommerce15Demo} />;
}

Props

Types

interface ProductCardItem {
  name: string;
  price: string;
  originalPrice?: string;
  rating: number;
  reviewCount: number;
  image?: { src: string; alt: string };
  onSale?: boolean;
}

Behavior notes

• Fully static server component: the Add to cart button has no click handler and the image zoom on hover is pure CSS (group-hover:scale-105), so nothing here needs client-side JavaScript.
• The star rating rounds `rating` to the nearest whole star to decide how many of the 5 icons render filled; it does not render partial/half-filled stars.
• The strikethrough original price and the Sale badge only render when a card sets onSale and originalPrice; a card can be onSale without an originalPrice, in which case only the badge shows.
• A card without an image falls back to a centered ShoppingBag icon rather than a blank box.
• The grid is a fixed 2/3/4-column responsive layout regardless of item count; passing more than 8 items wraps to additional rows rather than shrinking the cards.