Carousel

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

PropTypeDefault
children*
ReactNode
className
string
opts
plugins
setApi
(api: CarouselApi) => void
carouselScrollbarLabel
string
hideOverflow
boolean
true

CarouselScrollbarProps

PropTypeDefault
className
string
colorScheme
'light' | 'dark'
'light'
label
string
'Carousel scrollbar'

CarouselButtonProps

PropTypeDefault
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);}