Product Card

Cards 7

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,
  ProductCardSubtitle,
  ProductCardTitle,
} from "@/components/ui/product-card";

const ESSAYS = [
  {
    title: "Buy Wisely",
    author: "Steph Ango",
    image:
      "https://cdn.21st.dev/assets/localized/7948ef82d91efdf2d5b4737ab7e2230593281004b3f2eaa8fe37c480c0da4ad5.jpg",
    url: "https://stephango.com/buy-wisely",
  },
  {
    title: "On Becoming Competitive",
    author: "Ludwig",
    image:
      "https://cdn.21st.dev/assets/localized/80e7133f2c7ebfeac4081803c2e6c151380e9b84f1b1cd85534f31a573dfb638.jpg",
    url: "https://ludwigabap.bearblog.dev/on-becoming-competitive-when-joining-a-new-company/",
  },
  {
    title: "Salary Negotiations",
    author: "Patrick McKenzie",
    image:
      "https://cdn.21st.dev/assets/localized/f758431dac412d15f5c732ec4ab77dcedaacf50c25336189c37ad9f566416c5b.jpg",
    url: "https://www.kalzumeus.com/2012/01/23/salary-negotiation/",
  },
  {
    title: "Solution Space & Taste",
    author: "Grant Slatton",
    image:
      "https://cdn.21st.dev/assets/localized/91ccb59ef283b94b4997091946bd135f4f1f3f3a8ac58403ce644f5c7288f252.jpg",
    url: "https://grantslatton.com/solution-space-taste",
  },
  {
    title: "The Bear Manifesto",
    author: "Herman",
    image:
      "https://cdn.21st.dev/assets/localized/329e92fcf6f965bee99712536d3d9fbe32717941ea686c8f6b0bfd663c9f0e3d.jpg",
    url: "https://herman.bearblog.dev/manifesto/",
  },
  {
    title: "Write Like You Talk",
    author: "Paul Graham",
    image:
      "https://cdn.21st.dev/assets/localized/12918af32dec7a6f5e08371f45d049f8b105610be6cd3f410b3dcf7abdf49579.jpg",
    url: "https://paulgraham.com/talk.html",
  },
];

export default function ProductCardGrid() {
  return (
    <div className="grid w-full grid-cols-2 gap-5 sm:grid-cols-3">
      {ESSAYS.map((essay) => (
        <a
          key={essay.title}
          href={essay.url}
          target="_blank"
          rel="noopener noreferrer"
          className="rounded outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)] focus-visible:ring-offset-2"
        >
          <ProductCard className="w-full max-w-none rounded-none">
            <ProductCardImage
              src={essay.image}
              alt={essay.title}
              className="rounded-none"
            />
            <ProductCardContent>
              <ProductCardHeader>
                <ProductCardTitle>{essay.title}</ProductCardTitle>
                <ProductCardSubtitle>by {essay.author}</ProductCardSubtitle>
              </ProductCardHeader>
            </ProductCardContent>
          </ProductCard>
        </a>
      ))}
    </div>
  );
}