Carousel

The Carousel component displays a series of slides that can be swiped between or selected directly via buttons

The Carousel must contain a Carousel.Slider with nested Carousel.Slides and optionally can include a Carousel.Pagination and Carousel.ArrowPrevious / Carousel.ArrowNext for navigation between slides. Carousel.Slider’s optional overflow prop will cause it to render all slides at once, allowing the user to drag them into view. Its gap prop controls the horizontal padding applied around each slide’s content, using the same spacing scale as Flex — it defaults to 3; pass "none" for full-bleed slides. The aria-selected attribute can be used as a CSS selector to style slides according to whether they are currently selected (see below).

Note that Carousel.Slides must receive an index prop in order to correctly apply styling based on whether they are selected and that Carousel.Arrows should be rendered inside a parent with position: relative in order to be positioned correctly.

<Carousel className="relative">
  <Carousel.ArrowPrevious className="absolute left-2" />
  <Carousel.ArrowNext className="absolute right-2" />

  <Carousel.Slider aria-label="Example carousel" className="mb-4">
    <Carousel.Slide index={0} aria-label="Slide 1">
      <div className="bg-primary-800 h-50 w-full max-w-50" />
    </Carousel.Slide>
    <Carousel.Slide index={1} aria-label="Slide 2">
      <div className="bg-primary-800 h-50 w-full max-w-50" />
    </Carousel.Slide>
    <Carousel.Slide index={2} aria-label="Slide 3">
      <div className="bg-primary-800 h-50 w-full max-w-50" />
    </Carousel.Slide>
  </Carousel.Slider>

  <Carousel.Pagination className="mx-auto w-max" />
</Carousel>

useCarousel hook

The useCarousel hook exposes the carousel context, allowing you to access the current state and control the carousel programmatically.

const CarouselInfo = () => {
  const { selectedIndex, scrollSnaps, canScrollPrev, canScrollNext } = useCarousel()

  return (
    <div>
      <div>Current slide: {selectedIndex + 1} of {scrollSnaps.length}</div>
      <div>Can scroll prev: {canScrollPrev ? 'yes' : 'no'}</div>
      <div>Can scroll next: {canScrollNext ? 'yes' : 'no'}</div>
    </div>
  )
}

API Reference