Next.js Carousel — Embla Slider for App Router

Drivn installs through a tiny CLI that writes the component source file directly into your repository — there is no runtime npm package to version-lock. Open a terminal in the root of your Next.js 16 project and run npx drivn add carousel. The CLI prompts once for your install directory (defaulting to src/components/ui/), copies carousel.tsx, and adds its dependencies — embla-carousel-react for the scroll engine and lucide-react for the chevron icons on the arrow buttons — to your package.json if they are missing. The Carousel also composes the Drivn Button for its Previous and Next controls, so the CLI installs that file alongside it. The CLI reference documents every flag, including how to target a custom path. After install you own the file; future releases will not overwrite it.

An App Router page is a server component by default, so it cannot run the hooks Embla relies on. Drivn's Carousel is marked 'use client' at the top of its source because the root calls useEmblaCarousel and holds scroll state with useState. The clean pattern is to keep the carousel in a small client component and render that island inside an otherwise server-rendered page. Import from @/components/ui/carousel, then compose the slides — no dynamic() import and no SSR-disable flag are needed, because Next.js inserts the client boundary automatically at the 'use client' directive. The installation guide covers project bootstrapping; the Carousel docs list the root props.

The structure is two nested pieces. Carousel.Content renders the Embla viewport — it attaches emblaRef to the scrolling div and wraps your slides in a flex container. Carousel.Item is each slide: its base classes are min-w-0 shrink-0 grow-0 basis-full, so every item fills the viewport width by default and the carousel shows one slide at a time. To show multiple slides per view, override basis on the item with a Tailwind fraction — basis-1/2 for two across, basis-1/3 for three. Each Carousel.Item also carries role="group" and aria-roledescription="slide" so assistive technology announces position correctly. Map your data straight into Carousel.Item children; there is no fixed slide count baked in.

Navigation comes as three drop-in sub-components. Carousel.Previous and Carousel.Next render Drivn Buttons (default variant="secondary", size="sm") absolutely positioned to the left and right of the track; each reads canScrollPrev / canScrollNext from context and disables itself automatically at the edges, with a built-in aria-label. Carousel.Dots maps over Embla's snap list, rendering one button per slide and highlighting the active index with bg-foreground. Because all of these consume the shared context, they stay in sync with drag, keyboard, and programmatic scrolling without any wiring on your part. Drop them as siblings of Carousel.Content inside the root.

The root accepts an orientation prop — pass orientation="vertical" and the component sets Embla's axis: 'y', flips the container to flex-col h-full, and switches the item spacing from horizontal to vertical padding. The same arrow and dot controls keep working on the vertical axis. To configure Embla itself — loop mode, drag-free scrolling, alignment, or auto-play plugins — pass the opts and plugins props straight through; they forward to useEmblaCarousel untouched. You can also grab the underlying API with the setApi callback for fully programmatic control. The Carousel examples page shows loop and multi-slide layouts in full.