Installation
Run the following command
npx vibes@latest add featured-card-carousel
Usage
import { FeaturedCardCarousel } from '@/vibes/soul/sections/featured-card-carousel';function Usage() { return ( <FeaturedCardCarousel cards={cards} cta={{ label: 'Shop all', href: '/all' }} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." title="Categories" /> );}const cards: CategoryCardContent[] = [ { title: 'Mini Bar Bag', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1YzIwNTljMi04NzcwLTRiM2ItYmIzMy02ZTk0ODNkY2M5MDk=/mini-bar-bag.jpeg', alt: 'Mini Bar Bag', }, href: '#', }]
API Reference
FeaturedCardCarouselProps
| Prop | Type | Default |
|---|
title*
| string
| |
description
| string
| |
cta
| | |
cards*
| | |
scrollbarLabel
| string
| |
CategoryCardContent
| Prop | Type | Default |
|---|
title*
| string
| |
image
| | |
href
| string
| |
Link
| Prop | Type | Default |
|---|
label*
| string
| |
href*
| string
| |
Image
| Prop | Type | Default |
|---|
src*
| string
| |
alt*
| string
| |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --featured-card-carousel-font-family: var(--font-family-body); --featured-card-carousel-title-font-family: var(--font-family-body); --featured-card-carousel-title: var(--foreground); --featured-card-carousel-description: var(--contrast-500);}
