Block PartsPro

Product Card

A shop tile with image, name, price and rating, plus optional wishlist and add-to-cart buttons.

Usage

Sale

Standing desk Pro

$489~~$599~~

4.8 (312)

Ergonomic chair

$329

In stock

Your cart is empty.

bash

npm install @wunderui/react

Then import what you need:

tsx

import { ProductCard, ProductCardProps } from "@wunderui/react"

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	—