Product Card

Component 202

About

Product Card A visually polished ProductCard component designed to showcase products in a grid layout. It features a clean design, accepts various product details via props for maximum reusability, and includes a subtle hover animation. The accompanying demo showcases a responsive grid with a staggered entrance animation for a modern user experience.

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, ProductCardProps } from "@/components/ui/product-card-2";
import { motion } from "framer-motion";

// Sample data for the product grid
const products: ProductCardProps[] = [
  {
    imageUrl: "https://cdn.21st.dev/assets/mirror/07/078b33c2581d2fa63b01b5dfd4967b7b35599a94d09bccbcbf5094385f3ab160.webp", // Placeholder image
    name: "realme Buds Wireless 5 ANC",
    tagline: "Best ANC, Beast Battery Life",
    price: 1399,
    originalPrice: 2799,
    offerText: "1400 Off",
  },
  {
    imageUrl: "https://cdn.21st.dev/assets/mirror/b6/b61a3ed15584401d291fcd744a36b9ea0240db830bc12cc428e70cc40edc1bf3.webp", // Placeholder image
    name: "realme Buds Air7",
    tagline: "52dB Segment's Strongest ANC*",
    price: 2699,
    originalPrice: 4899,
    isCouponPrice: true,
    offerText: "Up to 100 Coupon",
  },
  {
    imageUrl: "https://cdn.21st.dev/assets/mirror/12/122ba5cceae5588f93a06c603bc209c663a01a53b7175bdeff4241e8668d9cb3.webp", // Placeholder image
    name: "realme Buds Air7 Pro",
    tagline: "The Sound Of Ai",
    price: 4499,
    originalPrice: 8999,
    offerText: "Up to 500 Bank Offer",
  },
  {
    imageUrl: "https://cdn.21st.dev/assets/mirror/e4/e447ef052a5d52fdf85a0bed145bad15dd0067145e1c91814a60d05fb78b062b.webp", // Placeholder image
    name: "realme Techlife Studio H1",
    tagline: "Style Your Sound",
    price: 3999,
    originalPrice: 7999,
    offerText: "Up to 500 Bank Offer",
  },
];

// Animation variants for the container and items
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1, // Delay between each child animation
    },
  },
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 100,
      damping: 10,
    },
  },
};

export default function ProductGridDemo() {
  return (
    <div className="w-full bg-background px-4 py-16">
      <div className="mx-auto max-w-7xl">
        {/* Section Header */}
        <div className="mb-12 text-center">
          <h2 className="text-4xl font-bold tracking-tight" style={{ color: '#F5A623' }}>
            Let's Groove
          </h2>
        </div>

        {/* Responsive Product Grid with Staggered Animation */}
        <motion.div
          className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          {products.map((product, index) => (
            <motion.div key={index} variants={itemVariants}>
              <ProductCard {...product} />
            </motion.div>
          ))}
        </motion.div>
      </div>
    </div>
  );
}