Product Card

Component

About

An ecommerce product card showing a photo with an optional hover shot, a sale/new badge, price with a struck-through old price, color swatches, a wishlist toggle, and an add-to-cart button that reports its own loading and success state.

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

Code

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

Usage.tsx

"use client";

import ProductCard from "@/components/ui/product-card";
import { useState } from "react";

/** Product shots drawn as SVG, so the demo needs no network and no image files. */
const shot = (
  backdrop: string,
  body: string,
  shade: string,
  shape: "tee" | "mug" | "bag" = "tee",
) => {
  const figure =
    shape === "mug"
      ? `<rect x='220' y='190' width='200' height='230' rx='26' fill='${body}'/><path d='M420 240 h40 a50 50 0 0 1 0 110 h-40' fill='none' stroke='${body}' stroke-width='26'/><rect x='220' y='190' width='200' height='34' rx='14' fill='${shade}'/>`
      : shape === "bag"
        ? `<path d='M250 250 q70 -150 140 0' fill='none' stroke='${shade}' stroke-width='18'/><rect x='190' y='240' width='260' height='230' rx='22' fill='${body}'/><rect x='190' y='300' width='260' height='16' fill='${shade}'/>`
        : `<path d='M230 170 L290 150 Q320 180 350 150 L410 170 L470 230 L430 270 L410 255 L410 470 L230 470 L230 255 L210 270 L170 230Z' fill='${body}'/><path d='M290 150 Q320 180 350 150' fill='none' stroke='${shade}' stroke-width='10'/>`;
  return `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><rect width='640' height='640' fill='${backdrop}'/><ellipse cx='320' cy='540' rx='190' ry='24' fill='${shade}' opacity='.25'/>${figure}</svg>`,
  )}`;
};

export default function ProductCardDemo() {
  const [cart, setCart] = useState(0);
  const add = () =>
    new Promise<void>((resolve) =>
      setTimeout(() => {
        setCart((count) => count + 1);
        resolve();
      }, 900),
    );
  return (
    <div className="flex w-full flex-col gap-3 bg-canvas p-6">
      <p className="text-[11px] font-semibold text-ink-faint">
        Cart: {cart} {cart === 1 ? "item" : "items"}
      </p>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
        <ProductCard
          title="Everyday organic tee"
          href="#tee"
          badge="sale"
          image={{
            src: shot("#eef1ea", "#9fb49a", "#6f8a6a"),
            alt: "Sage organic cotton t-shirt, front",
          }}
          hoverImage={{ src: shot("#e4e9df", "#8aa385", "#5c7657"), alt: "" }}
          price={28}
          compareAtPrice={38}
          rating={{ value: 4.4, count: 1214 }}
          swatches={[
            { value: "sage", label: "Sage", color: "#9fb49a" },
            { value: "oat", label: "Oat", color: "#e6dccb" },
            { value: "ink", label: "Ink", color: "#2b2f36" },
          ]}
          onAddToCart={add}
        />
        <ProductCard
          title="Stoneware mug, 350 ml"
          href="#mug"
          badge="new"
          image={{
            src: shot("#f3efe8", "#d8cbb5", "#a8977c", "mug"),
            alt: "Speckled cream stoneware mug",
          }}
          price={22}
          rating={{ value: 4.8, count: 86 }}
          onAddToCart={add}
          defaultWishlisted
        />
        <ProductCard
          title="Waxed canvas tote"
          href="#tote"
          image={{
            src: shot("#ecefe9", "#6b6f4f", "#4a4d35", "bag"),
            alt: "Olive waxed canvas tote bag",
          }}
          price={64.5}
          swatches={[
            { value: "olive", label: "Olive", color: "#6b6f4f" },
            { value: "tan", label: "Tan", color: "#b38a5a" },
          ]}
          onAddToCart={add}
        />
      </div>
    </div>
  );
}