Product Card

Cards 5

About

A compound card component for e-commerce product listings with an image well, an overlaid wishlist badge, and a title/subtitle/price footer.

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

import {
  ProductCard,
  ProductCardContent,
  ProductCardHeader,
  ProductCardImage,
  ProductCardMetric,
  ProductCardSubtitle,
  ProductCardTitle,
} from "@/components/ui/product-card";
import { useState } from "react";

export default function ProductCardSizes() {
  const [size, setSize] = useState<"sm" | "default" | "lg">("lg");

  return (
    <div className="flex w-full flex-col items-center gap-5">
      <ProductCard size={size}>
        <ProductCardImage
          src="https://cdn.21st.dev/assets/localized/4a8b5b9ac172a0b7c34cf00f60406cbb407bffe9c8a4b687b4a364aabd19948c.webp"
          alt="Analogue Pocket"
        />
        <ProductCardContent>
          <ProductCardHeader>
            <ProductCardTitle>Analogue Pocket</ProductCardTitle>
            <ProductCardSubtitle>Gaming Console</ProductCardSubtitle>
          </ProductCardHeader>
          <ProductCardMetric>$219</ProductCardMetric>
        </ProductCardContent>
      </ProductCard>

      <label className="text-caption text-muted-foreground flex items-center gap-2">
        Size
        <select
          value={size}
          onChange={(e) => setSize(e.target.value as "sm" | "default" | "lg")}
          className="border-border bg-background text-foreground text-caption rounded-md border px-2 py-1 outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)]"
        >
          <option value="sm">sm</option>
          <option value="default">default</option>
          <option value="lg">lg</option>
        </select>
      </label>
    </div>
  );
}