Product Grid

Product catalog. Pro · Shop and payments › Catalog

Installation

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

npm install valyro-ui-pro

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

Props

Prop	Type	Default
`products` *	`ProductGridItem[]`		Products in display order; sorting and paging are up to the caller.
`totalCount`	`number`		Size of the whole result set (defaults to `products.length`).
`currency`	`string`		ISO 4217 code for products without their own `currency`.
`loading`	`boolean`	`false`	Initial load: renders skeleton cards instead of products.
`sortOptions`	`ProductSortOption[]`	`DEFAULT_SORT_OPTIONS`	Choices of the sort menu; an empty list hides it. Without a `sort` value the first one is selected.
`sort`	`string`		Controlled `sort`; use with `onSortChange`.
`defaultSort`	`string`		Initial `sort` when uncontrolled.
`onSortChange`	`(value: string) => void`		Called with the new `sort` when it changes.
`view`	`'grid' \| 'list'`		Controlled `view`; use with `onViewChange`.
`defaultView`	`'grid' \| 'list'`	`'grid'`	Initial `view` when uncontrolled.
`onViewChange`	`(view: ProductGridView) => void`		Called with the new `view` when it changes.
`hasMore`	`boolean`	`false`	Shows the "Load more" button.
`loadingMore`	`boolean`	`false`	The next page is loading: skeleton cards follow the products and Load more shows a spinner.
`onLoadMore`	`() => void`		Called by the Load more button.
`onAddToCart`	`(product: ProductGridItem) => void \| Promise<void>`		Called by a card's add button; a returned promise keeps it loading until it settles.
`onWishlistedChange`	`(product: ProductGridItem, wishlisted: boolean) => void`		Called when a card's wishlist heart is toggled; each card keeps its own state.
`empty`	`ReactNode`		Replaces the default empty state.
`locale`	`string`		Locale for prices and counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ProductGridLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Product Card — Product card
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: Product Card · Next: Product Filters · All Shop and payments