Product Spotlight

Featured product: tagged photo, price, rating and actions. Pro · Shop and payments › Catalog

Installation

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

npm install valyro-ui-pro

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

Prop	Type	Default
`heading`	`ReactNode`		Line above the card: "Best match: Drift Runner".
`reason`	`ReactNode`		Why it was picked, under the heading.
`imageSrc` *	`string`		Product photo.
`imageAlt` *	`string`		Text alternative of the photo.
`imageBadge`	`ReactNode`		Chip over the photo: stock, a discount.
`imageBadgeTone`	`'success' \| 'warning' \| 'danger' \| 'accent' \| 'neutral'`	`'success'`	Color of the chip. Default `success`.
`meta`	`ReactNode`		Small uppercase line: "Shoes · Bone".
`name` *	`ReactNode`		Product name.
`price` *	`number`		Price in the currency's major unit.
`currency`	`string`	`'USD'`	ISO 4217 code. Default USD.
`rating`	`number`		Average rating out of 5.
`reviewCount`	`number`		Number of reviews after the score.
`description`	`ReactNode`		A sentence or two about fit and use.
`actions`	`ReactNode`		Buttons at the bottom.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading or, without it, of the name (default 3).
`locale`	`string`		BCP 47 locale for the price and counts.
`labels`	`Partial<ProductSpotlightLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
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