Product cardPro
Product tile with swatches, wishlist, sale price and add-to-cart.
Sale
Linen overshirt
$160.00$128.00
(218)
Stoneware mug
$34.00
(512)
When to use
- Product grids in stores and catalogs.
When not to use
- Product detail pages: use the product detail block.
Installation
Usage
Import it from @/components/ui/product-card after installing.
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 fromRating
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 |
| EnterorSpace | 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.
This page as Markdown, for assistants and coding agents:
/components/product-card/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt