ComponentsCommerce
ProductCard
Product display card with image, title, price, and optional action
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
Premium Headphones
$199.99
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.
MacBook Pro
Powerful laptop with M2 chip and stunning Retina display
$1,999
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.
Cotton T-Shirt
Comfortable everyday wear
$29.99
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>
);
}Featured Product
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>
);
}