Block Parts
Product Card
A shop tile with image, name, price and rating, plus optional wishlist and add-to-cart buttons.
Usage
Standing desk Pro
$489$599
4.8 (312)
Ergonomic chair
$329
In stock
Your cart is empty.
Installation
npm install @wunderui/reactThen import what you need:
import { ProductCard, ProductCardProps } from "@wunderui/react"API Reference
| Prop | Type | Default |
|---|---|---|
| name | ReactNode | — |
| price | ReactNode | — |
| compareAt | ReactNode | — |
| rating | number | — |
| reviews | number | — |
| availability | ReactNode | — |
| badge | { label: ReactNode; color?: BadgeColor } | — |
| image | string | — |
| tint | Tint | "indigo" |
| wishlisted | boolean | — |
| onWishlist | () => void | — |
| onAddToCart | () => void | — |
| addToCartLabel | ReactNode | "Add to cart" |
| onClick | () => void | — |
| className | string | — |