Carousel
View on shadcn/uiA carousel component for cycling through elements.
1
2
3
4
5
About
The Carousel component is built on top of Embla Carousel, a lightweight carousel library with fluid motion and great performance.
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/carousel.jsonUsage
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";<Carousel>
<CarouselContent>
<CarouselItem>…</CarouselItem>
<CarouselItem>…</CarouselItem>
<CarouselItem>…</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Examples
Orientation
1
2
3
4
5
Use the orientation prop to set the carousel to vertical mode.
Sizing
1
2
3
4
5
Use the basis utility class on the CarouselItem to set the size of each item.
Spacing
1
2
3
4
5
Adjust spacing by modifying the negative margin on CarouselContent and padding on CarouselItem.
API reference
This component is built on top of Embla Carousel. See the Embla Carousel documentation for the full API reference.