Skip to content
Nim UI

ProductCard

The ProductCard component presents a product with its image, title, price, and optional description and action button. It features a hover shadow effect and image zoom transition for an engaging shopping experience.

Import

import { ProductCard } from '@nim-ui/components';

Basic Usage

Basic ProductCard

Premium Headphones

Premium Headphones

$199.99
View Code 
<ProductCard
  image="/products/headphones.jpg"
  title="Premium Headphones"
  price="$199.99"
/>

With Description

Add a short description to provide more context about the product.

ProductCard with Description

MacBook Pro

MacBook Pro

Powerful laptop with M2 chip and stunning Retina display

$1,999
View Code 
<ProductCard
  image="/products/laptop.jpg"
  title="MacBook Pro"
  price="$1,999"
  description="Powerful laptop with M2 chip and stunning Retina display"
/>

With Action Button

Pass a custom action element such as a Button to the action prop.

ProductCard with Action

Cotton T-Shirt

Cotton T-Shirt

Comfortable everyday wear

$29.99
View Code 
<ProductCard
  image="/products/shirt.jpg"
  title="Cotton T-Shirt"
  price="$29.99"
  description="Comfortable everyday wear"
  action={<Button size="sm">Add to Cart</Button>}
/>

Props

Name Type Default Description
image * string - URL of the product image
title * string - Product name or title
price * string | number - Formatted price to display
description string - Short description of the product (2-line clamp)
action ReactNode - Custom action element, typically a Button
imageAlt string - Alt text for the image. Defaults to the title if not provided
className string - Additional CSS classes to apply

Usage Examples

Product Grid

function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
      {products.map((product) => (
        <ProductCard
          key={product.id}
          image={product.imageUrl}
          title={product.name}
          price={`$${product.price.toFixed(2)}`}
          description={product.shortDescription}
          action={
            <Button size="sm" onClick={() => addToCart(product.id)}>
              Add to Cart
            </Button>
          }
        />
      ))}
    </div>
  );
}
function FeaturedProduct({ product }: { product: Product }) {
  return (
    <div className="max-w-sm mx-auto">
      <ProductCard
        image={product.imageUrl}
        title={product.name}
        price={`$${product.price}`}
        description={product.description}
        imageAlt={`${product.name} - Featured`}
        action={
          <Button variant="primary" size="md">
            Buy Now
          </Button>
        }
      />
    </div>
  );
}