Product Detail
Commerce
Source and install need .
pnpm dlx shadcn@latest add @assembli/product-gridProduct Grid
A collection page grid: breadcrumb, title and collection pills over a sticky toolbar with quick filters, sort and a 2, 3 or 4 column density toggle (1 or 2 on phones). Tiles swap to a second photo on hover, swatches change the shot, badges show New and −20%, a heart saves to the wishlist, and quick add rises with sizes and confirms in place. Load more fills a progress bar.
Props
Other props pass through to the root element.
products*
ProductGridProduct[]
title*
React.ReactNode
description
React.ReactNode
breadcrumbs
{ label: string; href?: string }[]
collections
ProductGridCollection[]
Collection pills under the title. The first one should be "All" with the value "all".
defaultCollection
string
Default
"all"pageSize
number
Default
8Products shown before Load more, and how many each press adds.
defaultSort
ProductGridSort
Default
"featured"defaultColumns
2 | 3 | 4
Default
4Columns on wide containers (2–4) and on phones (1–2).
defaultPhoneColumns
1 | 2
Default
2quickFilters
boolean
Default
trueBuilt-in quick filters (in stock, on sale, new, colors).
filters
React.ReactNode
Your own filter control, e.g. Product Filters in sheet mode, placed first in the toolbar.
onAddToBag
(product: ProductGridProduct, detail: ProductGridAddDetail) => void | Promise<u…
Return a promise to show "Adding…" until it settles.
defaultWishlist
string[]
Default
[]onWishlistChange
(ids: string[]) => void
currency
string
Default
"USD"locale
string
Default
"en-US"
| Description | |||
|---|---|---|---|
| products* | ProductGridProduct[] | – | |
| title* | React.ReactNode | – | |
| description | React.ReactNode | – | |
| breadcrumbs | { label: string; href?: string }[] | – | |
| collections | ProductGridCollection[] | – | Collection pills under the title. The first one should be "All" with the value "all". |
| defaultCollection | string | "all" | |
| pageSize | number | 8 | Products shown before Load more, and how many each press adds. |
| defaultSort | ProductGridSort | "featured" | |
| defaultColumns | 2 | 3 | 4 | 4 | Columns on wide containers (2–4) and on phones (1–2). |
| defaultPhoneColumns | 1 | 2 | 2 | |
| quickFilters | boolean | true | Built-in quick filters (in stock, on sale, new, colors). |
| filters | React.ReactNode | – | Your own filter control, e.g. Product Filters in sheet mode, placed first in the toolbar. |
| onAddToBag | (product: ProductGridProduct, detail: ProductGridAddDetail) => void | Promise<u… | – | Return a promise to show "Adding…" until it settles. |
| defaultWishlist | string[] | [] | |
| onWishlistChange | (ids: string[]) => void | – | |
| currency | string | "USD" | |
| locale | string | "en-US" |
Related
Block
Invoice
Commerce