Installation
Run the following command
npx vibes@latest add carousel
Usage
import { Carousel, CarouselButtons, CarouselContent, CarouselItem, CarouselScrollbar,} from '@/vibes/soul/primitives/carousel';function Usage() { return ( <Carousel> <CarouselContent> {slides.map((slide, index) => ( <CarouselItem key={index}> <p>{slide}</p> </CarouselItem> ))} </CarouselContent> <CarouselScrollbar /> <CarouselButtons nextLabel="Next" previousLabel="Previous" /> </Carousel> );}const slides = [ 'Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8',];
API Reference
This component uses the Embla Carousel library. Refer to the Embla Carousel docs for additional reference.
CarouselProps
Prop | Type | Default |
---|
children*
| ReactNode
| |
className
| string
| |
opts
| | |
plugins
| | |
setApi
| | |
carouselScrollbarLabel
| string
| |
hideOverflow
| boolean
| true
|
Prop | Type | Default |
---|
className
| string
| |
colorScheme
| 'light' | 'dark'
| 'light'
|
label
| string
| 'Carousel scrollbar'
|
Prop | Type | Default |
---|
className
| string
| |
nextLabel
| string
| 'Next'
|
previousLabel
| string
| 'Previous'
|
colorScheme
| 'light' | 'dark'
| 'light'
|
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
Carousel Buttons
:root { --carousel-focus: var(--primary); --carousel-light-button: var(--foreground); --carousel-dark-button: var(--background);}
Carousel Scrollbar
:root { --carousel-light-scrollbar: var(--foreground); --carousel-dark-scrollbar: var(--background);}