# Product card

> Product tile with swatches, wishlist, sale price and add-to-cart.

Component · Pro · https://lodeui.com/components/product-card

## When to use

- Product grids in stores and catalogs.

## When not to use

- Product detail pages: use the product detail block.

## Installation

```bash
npx shadcn@latest add @lode/product-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ProductCard } from "@/components/ui/product-card";

export function Item() {
  return <ProductCard name="Linen Overshirt" price={89} compareAt={120} rating={4.6} reviews={212} swatches={[{ name: "Sand", color: "#d6c7a1" }]} onAddToCart={(s) => console.log(s)} />;
}
```

Built from: Rating

## API reference

### ProductCard

Image, swatches, wishlist, sale price and an add-to-cart that confirms in place.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name / price / compareAt / currency | `string / number / number / string` | `— / — / — / "USD"` | compareAt shows a sale price. |
| rating / reviews | `number` | – | Stars and count. |
| image / colors | `string / [string, string]` | – | Image, or a generated placeholder. |
| swatches | `{ name; color }[]` | – | Color choices. |
| badge | `string` | – | Corner label. |
| onAddToCart | `(swatch?) => void` | – | Called with the chosen swatch. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach swatches, wishlist and add to cart |
| Enter / Space | Pick a swatch or press a button |

## Accessibility

- Swatches are a labelled radiogroup; wishlist is a toggle with aria-pressed.

## Motion

- Add to cart morphs into a check; image zooms on hover.

## Responsive behavior

- Fills its grid cell.

## Performance

- Use optimized images.

## Notes for AI

- Prices are numbers; formatting uses currency.

## Related

- [Rating](https://lodeui.com/components/rating) — Interactive or read-only star rating with half stars.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.