Product Card Grid

Component

About

A responsive e-commerce product grid with star ratings, sale/bestseller badges, and per-card add-to-cart buttons for shop and catalog pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Product Card Grid to your project and fits it to your theme.

Code

How Product Card Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Ecommerce1 from "@/components/ui/ecommerce1";

export default function Ecommerce1Demo() {
  return (
    <Ecommerce1
      badge={{ label: "New Arrivals", variant: "outline" }}
      heading="Shop our latest collection"
      description="Discover our handpicked selection of premium products designed for modern living."
      currency="$"
      products={[
        {
          name: "Minimal Desk Lamp",
          price: 89,
          originalPrice: 129,
          image:
            "https://cdn.21st.dev/assets/mirror/c0/c0f82fcc37da2a87edfcf3fc5f00faf84f7cd6412f53ab25c8d7446d5fb25838.jpg",
          badge: "Sale",
          rating: 4.8,
          reviewCount: 124,
        },
        {
          name: "Ceramic Vase Set",
          price: 65,
          image:
            "https://cdn.21st.dev/assets/mirror/96/96c38882ead90fc7fa153b9b782b2a7d032d2e3d8f1fc830cba4be00a54bb132.jpg",
          rating: 4.9,
          reviewCount: 89,
        },
        {
          name: "Wooden Side Table",
          price: 199,
          image:
            "https://cdn.21st.dev/assets/mirror/d0/d0dc062baa213f5a87b3a7a13ea53ec144a4715f1dffa3b3f70be3f6489391fc.jpg",
          badge: "Bestseller",
          rating: 4.7,
          reviewCount: 256,
        },
        {
          name: "Linen Throw Blanket",
          price: 79,
          originalPrice: 99,
          image:
            "https://cdn.21st.dev/assets/mirror/43/4383b74c85e76d87a780b07a7cd9be7a8807fcf10aed83ff6411dc69d52d6be2.jpg",
          rating: 4.6,
          reviewCount: 67,
        },
      ]}
      onAddToCart={(product) => console.log("add to cart", product.name)}
    />
  );
}