# ProductCard (https://docs.salla.dev/twilight/react/components/product-card)



Use `ProductCard` to show a product in a grid, slider or list. It already handles the price, sale and stock badges, the wishlist button and add-to-cart, so you only pass the product.

## Example [#example]

```tsx title="app/components/home/FixedProducts.tsx"
import { ProductCard } from '@salla.sa/twilight-theme-engine/product';
import type { Product } from '@salla.sa/twilight-theme-engine/types';

export function FixedProducts({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
      {products.map((product, index) => (
        <ProductCard key={product.id} product={product} index={index} />
      ))}
    </div>
  );
}
```

<Demo name="components/product-card" />

## API [#api]

| Prop                | Type                                                                  | Description                                                                       |
| ------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| `product`           | `Product`                                                             | The product to show. Required.                                                    |
| `layout?`           | `"vertical" \| "horizontal" \| "fullImage" \| "minimal" \| "special"` | Card layout. Default: `"vertical"`.                                               |
| `className?`        | `string`                                                              | Extra class on the card.                                                          |
| `withShadow?`       | `boolean`                                                             | Adds the card shadow class. Default: `false`.                                     |
| `withQuantity?`     | `boolean`                                                             | Shows the remaining quantity, or an out-of-stock badge. Default: `false`.         |
| `withoutAddButton?` | `boolean`                                                             | Hides the add-to-cart button. Default: `false`.                                   |
| `index?`            | `number`                                                              | Position in a list. Delays the card animation by `index` x 100 ms. Default: `0`.  |
| `imagePriority?`    | `boolean`                                                             | Load the image eagerly. Use for the first cards above the fold. Default: `false`. |
| `sizes?`            | `string`                                                              | Overrides the image `sizes` hint.                                                 |

## Gotchas [#gotchas]

* It uses [`useMoney`](https://docs.salla.dev/twilight/react/hooks/use-money), [`useWishlist`](https://docs.salla.dev/twilight/react/hooks/use-wishlist) and [`Image`](https://docs.salla.dev/twilight/react/components/image) inside, so it must be below `TwilightProvider` (your root route already is).
* Out-of-stock products show a "notify me" button, unless the theme setting `notify_when_available_in_card` is turned off.
* Product links are plain `<a href>` anchors, so opening a product reloads the page.
* To change the card for the whole theme, wrap it (as the starter theme does with its own `ProductCard`) or replace it through the component registry. See [Replace the product card](https://docs.salla.dev/twilight/react/recipes/replace-the-product-card).

<Callout type="warn">
  A registry replacement is used only when `product:card` was registered twice: the registry keeps the earlier component as the "original", and `ProductCard` ignores a replacement that has no original. A single `override` on a fresh registry leaves the engine card in place. The choice is also made once, on the first render, so register before any card renders.
</Callout>

## Next [#next]

* [Replace the product card](https://docs.salla.dev/twilight/react/recipes/replace-the-product-card) is the step-by-step version.
* [Layout and components](https://docs.salla.dev/twilight/react/guide/layout-and-components) shows the other ways to swap a component.