Product Carousel
Installation
Run the following command
npx vibes@latest add product-carouselUsage
import { ProductCarousel } from '@/vibes/soul/sections/product-carousel';function Usage() { return ( <ProductCarousel products={products} /> );}const products = [ { id: '1', title: 'Product 1', },]API Reference
ProductCarouselProps
| Prop | Type | Default |
|---|---|---|
className | string | |
products* | ||
colorScheme | 'light' | 'dark' | 'light' |
aspectRatio | '5:6' | '3:4' | '1:1' | '5:6' |
emptyStateTitle | Streamable<string> | 'No products found' |
emptyStateSubtitle | Streamable<string> | 'Try browsing our complete catalog of products.' |
scrollbarLabel | string | 'Scroll' |
previousLabel | string | 'Previous' |
nextLabel | string | 'Next' |
placeholderCount | number | 8 |
showButtons | boolean | true |
showScrollbar | boolean | true |
hideOverflow | boolean | true |
CarouselProduct
| Prop | Type | Default |
|---|---|---|
id* | string | |
title* | string | |
href* | string | |
image | { src: string; alt: string } | |
price | string | PriceRange | PriceSale | |
subtitle | string | |
badge | string | |
rating | number |
PriceRange
| Prop | Type | Default |
|---|---|---|
type* | 'range' | |
minValue* | string | |
maxValue* | string |
PriceSale
| Prop | Type | Default |
|---|---|---|
type* | 'sale' | |
previousValue* | string | |
currentValue* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --product-carousel-light-empty-title: var(--foreground); --product-carousel-light-empty-subtitle: var(--contrast-500); --product-carousel-dark-empty-title: var(--background); --product-carousel-dark-empty-subtitle: var(--contrast-100); --product-carousel-empty-title-font-family: var(--font-family-heading); --product-carousel-empty-subtitle-font-family: var(--font-family-body);}