Product Card

The ProductCard component is a fully customizable e-commerce card built with shadcn/ui, Tailwind CSS, and Framer Motion. It provides a modern, responsive, and theme-aware product showcase with interactive features, designed to work seamlessly in both light and dark modes. Key Features: -> Image carousel with smooth fade animations -> Dynamic badges for New, Best Seller, or Discount labels -> Wishlist toggle with visual feedback -> Selectable color swatches and size options -> Rating & reviews display with free shipping indicator -> Add to Cart button with loading and success states -> Light & dark mode support using shadcn’s theme system -> Polished UI with hover shadows, rounded corners, and fluid transitions This component is ideal for online stores, product listings, and landing pages, where both visual quality and user experience matter. It follows the shadcn/ui design pattern of separating reusable logic from demo usage, ensuring scalability and maintainability.

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.

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

export default function DemoOne() {
  return <ProductCard   name="Nike Air Force"
        price={129.99}
        originalPrice={169.99}
        rating={4.7}
        reviewCount={325}
        discount={25}
        freeShipping
        isNew
        isBestSeller
        colors={["#1e293b", "#f43f5e", "#0ea5e9", "#10b981"]}
        sizes={["38", "39", "40", "41", "42", "43"]}
        images={[
          "https://cdn.21st.dev/assets/mirror/ad/ade63a3c4df44b7c8e7277a749d732494e317e8289fd2ed72d57de841ff63896.jpg",
          "https://cdn.21st.dev/assets/mirror/7c/7cf794d66ccf2e6a3e361e97ba42f976b694a518b425127da9d3375545beeaf6.jpg",
          "https://cdn.21st.dev/assets/mirror/25/25c842cc27771b65a574283e9cabd64eb220df7f45276ee20024dd620bf11da4.jpg"
        ]} />;
}