Product Card

Cards

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";

export default function ProductCardOverrideStyling() {
  return (
    <ProductCard className="border-border/60 bg-card rounded-2xl border p-2">
      <ProductCardImage
        src="https://cdn.21st.dev/assets/localized/fb1c2b03e0bf5da10d8286d5496e559f07f5d7e011f8f4922a601974467d7986.png"
        alt="Twemco Clock"
        className="rounded-lg"
      />
      <ProductCardContent className="px-1 pt-3 pb-1">
        <ProductCardHeader>
          <ProductCardTitle className="font-semibold tracking-tight">
            Twemco Clock
          </ProductCardTitle>
          <ProductCardSubtitle className="text-[0.85em] tracking-wider uppercase">
            Desk clock
          </ProductCardSubtitle>
        </ProductCardHeader>
        <ProductCardMetric className="tabular-nums">$219</ProductCardMetric>
      </ProductCardContent>
    </ProductCard>
  );
}