Product List Section
Installation
Run the following command
npx vibes@latest add product-list-sectionUsage
function Usage() { return ( );}API Reference
| Prop | Type | Default |
|---|---|---|
breadcrumbs | 'Products' | |
title | Streamable<string> | |
totalCount* | Streamable<number> | |
products* | ||
filters* | ||
sortOptions* | ||
compareProducts | ||
paginationInfo | ||
compareAction | ComponentProps<'form'>['action'] | |
compareLabel | Streamable<string> | |
filterLabel | string | |
filtersPanelTitle | Streamable<string> | 'Filters' |
resetFiltersLabel | Streamable<string> | |
rangeFilterApplyLabel | Streamable<string> | |
sortLabel | Streamable<string> | |
sortPlaceholder | Streamable<string> | |
sortParamName | string | |
sortDefaultValue | string | |
compareParamName | string | |
emptyStateSubtitle | Streamable<string> | |
emptyStateTitle | Streamable<string> | |
placeholderCount | number |
Product
| Prop | Type | Default |
|---|---|---|
id* | string | |
title* | string | |
href* | string | |
image | { src: string; alt: string } | |
price | Price | |
subtitle | string | |
badge | string | |
rating | number |
Breadcrumb
| Prop | Type | Default |
|---|---|---|
label* | string | |
href* | string |
SortOption
| Prop | Type | Default |
|---|---|---|
label* | string | |
value* | string |
CursorPaginationInfo
| Prop | Type | Default |
|---|---|---|
startCursorParamName | string | |
startCursor* | string | null | |
endCursorParamName | string | |
endCursor* | string | null |
Filter
See @/vibes/soul/sections/product-list-section/filter-panel.tsx for more information on available filter types.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --product-list-section-title: var(--foreground); --product-list-section-title-font-family: var(--font-family-heading); --product-list-section-total-count: var(--contrast-300); --product-list-section-filter-label-font-family: var(--font-family-mono); --product-list-section-filter-label: var(--contrast-400); --product-list-section-filter-link: var(--contrast-500); --product-list-section-filter-link-hover: var(--foreground); --product-list-section-filter-link-font-family: var(--font-family-body);}