Featured Product Carousel
Installation
Run the following command
npx vibes@latest add featured-product-carouselUsage
import { FeaturedProductCarousel } from '@/vibes/soul/sections/featured-product-carousel';function Usage() { return ( <FeaturedProductCarousel cta={{ label: 'Shop Now', href: '#' }} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore." products={products} title="Our plants" /> );}const products = [ { id: '1', title: 'Philodendron Imperial Red', subtitle: 'Indoor Plant', badge: 'Popular', price: '$44.95', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTowNzAzMzk0Ni01NGNhLTQ3ZDYtODgyYi0wYWI3NTUzNTU4YjQ=/kv08IvX08j.jpeg', alt: 'Philodendron Imperial Red', }, href: '#', rating: 4, }]API Reference
FeaturedProductCarouselProps
| Prop | Type | Default |
|---|---|---|
className | string | |
title | string | |
description | string | |
cta | Link | |
products* | ||
emptyStateTitle | Streamable<string> | |
emptyStateSubtitle | Streamable<string> | |
placeholderCount | number | |
scrollbarLabel | string | |
previousLabel | string | |
nextLabel | string | |
hideOverflow | boolean |
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 { --featured-product-carousel-font-family: var(--font-family-body); --featured-product-carousel-title-font-family: var(--font-family-heading); --featured-product-carousel-title: var(--foreground); --featured-product-carousel-description: var(--contrast-500);}