Product List
- Displays a list of products
- Displays skeleton loading state for async data
Installation
Run the following command
npx vibes@latest add product-listUsage
import { ProductList } from '@/vibes/soul/sections/product-list';function Usage() { return ( <ProductList products={products} /> );}const products = [ { id: '1', title: 'Product 1', href: '#', },]API Reference
ProductList
| Prop | Type | Default |
|---|---|---|
products* | ||
compareProducts | [] | |
className | string | |
colorScheme | 'light' | 'dark' | 'light' |
aspectRatio | '5:6' | '3:4' | '1:1' | '5:6' |
showCompare | boolean | false |
compareAction | (formData: FormData) => void | |
compareLabel | Streamable<string> | 'Compare' |
compareParamName | string | 'compare' |
emptyStateTitle | Streamable<string> | 'No products found' |
emptyStateSubtitle | Streamable<string> | 'Try browsing our complete catalog of products' |
placeholderCount | number | 0 |
ListProduct
| Prop | Type | Default |
|---|---|---|
id* | string | |
title* | string | |
href* | string | |
image | { src: string; alt: string } | |
price | Price | |
subtitle | string | |
badge | string | |
rating | number |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --product-list-light-empty-title: var(--foreground); --product-list-light-empty-subtitle: var(--contrast-500); --product-list-dark-empty-title: var(--background); --product-list-dark-empty-subtitle: var(--contrast-100); --product-list-empty-state-title-font-family: var(--font-family-heading); --product-list-empty-state-subtitle-font-family: var(--font-family-body);}