How to Add a Carousel to a React App

Before installing the Carousel, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Carousel pulls in embla-carousel-react for the slider engine and lucide-react for the chevron icons, and it depends on the Drivn Button for its arrow controls — the CLI adds the npm package and writes the Button source for you during install if either is missing.

Run the CLI from your project root to add the Carousel source. The command prompts once for your install directory (defaulting to src/components/ui/), writes carousel.tsx, adds embla-carousel-react to your package.json if it is missing, and — because the arrows are built on it — also writes button.tsx alongside. No global config file is created; the Carousel is a TypeScript file in your repo that you edit like any other component. Confirm both files landed in your editor, then commit them. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the flags for targeting a custom location during install.

The Carousel manages its own scroll state, so you do not wire up useState — you just declare the slides. Import the component and nest Carousel.Item children inside Carousel.Content; the root sets up the Embla viewport and the items become the snap points. Each Carousel.Item is min-w-0 shrink-0 grow-0 basis-full by default, so one slide fills the frame and the rest sit off-screen until you scroll. The source begins with 'use client' because it calls useEmblaCarousel, so in a Next.js App Router project keep the Carousel in a client component and render it as an island. Touch and trackpad swipe work immediately — Embla handles the drag — and the root is focusable with arrow-key support already wired. See the Carousel docs for the full API.

Drop Carousel.Previous and Carousel.Next inside the Carousel to render the arrow controls, and Carousel.Dots for the indicator row. All three read the shared context, so they need no props — Previous and Next are Drivn Buttons that disable themselves when canScrollPrev or canScrollNext is false, and each renders a ChevronLeft or ChevronRight from lucide-react. Carousel.Dots maps Embla's scrollSnapList, renders one button per slide, marks the active one with the bg-foreground class, and calls scrollTo on click. The arrows are absolutely positioned just outside the frame, so leave horizontal room in the layout. Every control is keyboard accessible and carries an aria-label. For finished patterns, browse the Carousel examples.

Behavior is configured through the opts prop, which passes straight to Embla. Set opts={{ loop: true }} to make the carousel wrap from the last slide back to the first. To show several slides at once, set opts={{ align: "start" }} and give each Carousel.Item a fractional basis like className="basis-1/3", which overrides the default basis-full — useful for product rows and logo walls. For a vertical slider, pass orientation="vertical", which flips Embla's axis and switches the item spacing from -ml-4/pl-4 to -mt-4/pt-4. Because every option is a plain prop, you change behavior without touching the source. The full prop and options reference lives in the Carousel docs; for the head-to-head see Drivn vs shadcn/ui Carousel.