Chuv Studio — Design System

Basic

Single slide at a time, horizontal

<Carousel className="w-full">
  <CarouselContent>
    {items.map((item, i) => (
      <CarouselItem key={i}>
        {/* slide content */}
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Multiple Slides

Show several items at once using basis classes on CarouselItem

1/3 width

<Carousel opts={{ align: "start" }} className="w-full">
  <CarouselContent>
    {items.map((item, i) => (
      <CarouselItem key={i} className="md:basis-1/2 lg:basis-1/3">
        {/* slide content */}
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Vertical

Scrolls top-to-bottom via orientation prop

vertical

<Carousel orientation="vertical" className="w-full max-w-xs">
  <CarouselContent className="h-64">
    {items.map((item, i) => (
      <CarouselItem key={i}>
        {/* slide content */}
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Controlled via API

Access the Embla API to read position and listen to events

Slide 0 of 0

const [api, setApi] = React.useState<CarouselApi>()
const [current, setCurrent] = React.useState(0)

React.useEffect(() => {
  if (!api) return
  setCurrent(api.selectedScrollSnap() + 1)
  api.on("select", () => setCurrent(api.selectedScrollSnap() + 1))
}, [api])

<Carousel setApi={setApi}>...</Carousel>
<p>Slide {current} of {api?.scrollSnapList().length}</p>

Uso

Import e props disponíveis

Import

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  type CarouselApi,
} from "@/components/ui/carousel"

Props — Carousel

orientation

"horizontal" | "vertical"

"horizontal"

opts

EmblaOptionsType

— loop, align, dragFree, etc.

plugins

EmblaPluginType[]

— embla plugins

setApi

(api: CarouselApi) => void

— access the Embla instance

Acessibilidade

O wrapper tem role="region" e aria-roledescription="carousel" automaticamente
Cada slide tem role="group" e aria-roledescription="slide"
Teclado: ← / → navegam entre slides quando focado

Chuv Studio Design System · Component: carousel.tsx · embla-carousel-react