Carousel
View on shadcn/uiA carousel with motion and swipe built using Embla.
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://dev.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.