Product Card

Product card. Pro · Shop and payments › Catalog

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add product-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ProductCard } from 'valyro-ui-pro';

Props

Prop	Type	Default
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	`vertical`: image on top with a full-width add button; `horizontal`: a compact row with a small thumbnail.
`swatch`	`string`		Selected swatch value.
`defaultSwatch`	`string`		Initial `swatch` when uncontrolled.
`onSwatchChange`	`(value: string) => void`		Called with the new `swatch` when it changes.
`wishlisted`	`boolean`		Controlled `wishlisted`; use with `onWishlistedChange`.
`defaultWishlisted`	`boolean`	`false`	Initial `wishlisted` when uncontrolled.
`onWishlistedChange`	`(wishlisted: boolean) => void`		Called with the new `wishlisted` when it changes.
`onAddToCart`	`() => void \| Promise<void>`		May return a promise: the button shows a spinner until it settles, then "Added".
`locale`	`string`		Locale for prices and counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ProductCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`title` *	`string`
`price` *	`number`
`compareAtPrice`	`number`		Original price; shows a strikethrough and a "Sale −N%" badge.
`currency`	`string`	`'USD'`
`isNew`	`boolean`
`soldOut`	`boolean`		Out of stock: the add-to-cart button is disabled and a badge says so.
`rating`	`number`		0–5.
`reviewCount`	`number`
`swatches`	`ProductSwatch[]`	`[]`
`imageSrc`	`string`		Product photo URL; falls back to a generated placeholder.
`hoverImageSrc`	`string`		Second photo revealed on hover.
`imageSeed`	`string`		Seed for the generated product image (defaults to the title).
`hoverImageSeed`	`string`		Seed for a generated second image revealed on hover; without any hover image the photo zooms instead.
`imageIcon`	`ReactNode`	`<ShoppingBagIcon />`

Related components

Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout
Checkout Form — Checkout: shipping, address type, payment and field validation
Order Tracking — Order tracking: stages, carrier, tracking number and history
Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless

Previous: Template Card · Next: Product Grid · All Shop and payments