Featured Product List
Installation
Run the following command
npx vibes@latest add featured-product-listUsage
import { FeaturedProductList } from '@/vibes/soul/sections/featured-product-list';function Usage() { return ( <FeaturedProductList cta={{ label: 'Shop Now', href: '#', }} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit duat pronto." products={products} title="Our gear" /> );}const products = [ { id: '1', title: 'Mini Bar Bag', subtitle: 'Blue/Black/Green', price: '$65', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1YzIwNTljMi04NzcwLTRiM2ItYmIzMy02ZTk0ODNkY2M5MDk=/mini-bar-bag.jpeg', alt: 'Mini Bar Bag', }, href: '#', rating: 4.3, },]API Reference
FeaturedProductList
| Prop | Type | Default |
|---|---|---|
className | string | |
title* | string | |
description | string | |
cta | Link | |
products* | ||
emptyStateTitle | Streamable<string> | |
emptyStateSubtitle | 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 |
Link
| Prop | Type | Default |
|---|---|---|
label* | string | |
href* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --featured-product-list-font-family: var(--font-family-body); --featured-product-list-title-font-family: var(--font-family-heading); --featured-product-list-title: var(--foreground); --featured-product-list-description: var(--contrast-500);}