shadcn.io is not affiliated with official shadcn/ui
Shadcn Carousel for React
An interactive slideshow for cycling through items.
1
2
3
4
5
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/carousel.jsonnpx shadcn@latest add https://kit.dev/r/aria/carousel.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/carousel.jsonyarn shadcn@latest add https://kit.dev/r/aria/carousel.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add embla-carousel-react lucide-reactnpm install embla-carousel-react lucide-reactpnpm add embla-carousel-react lucide-reactyarn add embla-carousel-react lucide-reactCopy and paste the following code into your project.
"use client";
import useEmblaCarousel, {
type UseEmblaCarouselType,
} from "embla-carousel-react";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import type React from "react";
import {
createContext,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/aria/components/button";
type CarouselApi = UseEmblaCarouselType[1];Update the import paths to match your project setup.
Anatomy
Carousel
├── CarouselItem
│ └── CarouselContent
├── CarouselControl
├── CarouselNext
├── CarouselPrevious
├── CarouselIndicator
│ └── CarouselIndicatorGroup
├── CarouselAutoplayTrigger
└── CarouselProgressTextUsage
import { Card, CardContent } from "@/components/ui/card";
import {
Carousel,
CarouselContent,
CarouselControl,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";const slides = [1, 2, 3, 4, 5];
const CarouselDemo = () => (
<Carousel
className="w-full max-w-[12rem] sm:max-w-xs"
slideCount={slides.length}
>
<CarouselContent>
{slides.map((slide, index) => (
<CarouselItem index={index} key={slide}>
<div className="p-1">
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<span className="font-semibold text-4xl">{slide}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselControl>
<CarouselPrevious />
<CarouselNext />
</CarouselControl>
</Carousel>
);Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
ArrowDown | Move to the next item. |
ArrowUp | Move to the previous item. |
ArrowRight | Move to the next item. |
ArrowLeft | Move to the previous item. |
Home | Go to the start. |
End | Go to the end. |
Demos
Size
Set item size with slidesPerPage (Ark equivalent of Embla basis-*).
Spacing
Control the gap between slides with the spacing prop.
Orientation
Use orientation="vertical" for a vertical carousel.
Api
Track the current page with controlled page / onPageChange.
Plugin
Autoplay with pause on hover via Ark autoplay / pause / play.
Multiple
Show multiple slides per page with slidesPerPage.
Rtl
Right-to-left carousel. See the RTL configuration guide for document direction.