ComponentClient component
Carousel
An accessible touch and keyboard-friendly carousel powered by Embla.
Installation
Preview
01
Foundations
Editable pieces, composed with Rivelle.
02
Components
Editable pieces, composed with Rivelle.
03
Blocks
Editable pieces, composed with Rivelle.
Usage
tsx
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
<Carousel>
<CarouselContent>
{[1, 2, 3].map((slide) => (
<CarouselItem key={slide}>Slide {slide}</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Controls the scroll axis. |
opts | CarouselOptions | — | Embla behavior and alignment options. |
setApi | (api: CarouselApi) => void | — | Exposes the Embla API for advanced control. |
className | string | — | Overrides or extends the generated Tailwind classes. |
disabled | boolean | false | Prevents user interaction when supported. |