Drivn vs shadcn/ui — Carousel Component Compared

shadcn's Carousel exports four separate components and you import each one explicitly. Drivn keeps the same primitives but mounts them on the Carousel root via Object.assign, so a single import line covers every piece you need — Carousel.Content, Carousel.Item, Carousel.Previous, Carousel.Next, Carousel.Dots. The Carousel docs cover every prop forwarded to Embla.

The import diff is small per file but it compounds. A page with two carousels saves four imports in Drivn, and the dot-notation lookup gives autocomplete the right shape without you remembering whether the export is named CarouselNext or CarouselNextButton. TypeScript narrows each subcomponent's props from the same root type, so renaming the root renames every child reference at once.

Dots are the first thing most teams add after the arrows, and they are the cleanest split between the two libraries. shadcn ships no Dots component, so the work lands in your app code: hold the Embla instance with setApi, pull the snap count from api.scrollSnapList(), track the active index by subscribing to select, and call api.scrollTo(i) from each button. That is a pair of useState hooks, a useEffect, and a map — rewritten in every project that needs a slider.

Drivn moves that bookkeeping into the root. CarouselRoot already holds scrollSnaps and selectedIndex in its context and refreshes both on Embla's reInit and select events, which leaves Carousel.Dots as a stateless consumer: it maps over scrollSnaps, applies styles.dots.active when i === selectedIndex, and renders each dot as a <button type="button"> labelled Go to slide {i + 1}. Because the snap list is rebuilt on reInit, adding or removing slides updates the dot count on its own. Theming lives in the styles.dots object in the Carousel source — bg-border inactive, bg-foreground active.

Both libraries wire aria-roledescription="carousel" on the root and aria-roledescription="slide" on each item, so screen readers announce the right region role. Both also handle Arrow Left and Arrow Right at the root via a handleKeyDown callback that calls api.scrollPrev() and api.scrollNext() — the keyboard model is identical. Where shadcn relies on the user to add tabIndex={0}, Drivn sets it on the root automatically so the carousel receives keyboard focus without an extra prop.

Neither library ships built-in screen-reader announcements for the active slide change, because Embla's select event fires on every drag, click, or keyboard scroll. Adding a polite live region is a five-line override on top of either component. The accessibility patterns docs show one approach.

Both libraries accept an orientation prop set to horizontal or vertical and forward it to Embla as the axis option. Both also pass a setApi callback so the parent component can grab the Embla API and drive the carousel from outside — useful for syncing two carousels, building a "go to slide N" button outside the component, or pausing autoplay on hover.

The shape of setApi is identical between Drivn and shadcn — both emit a CarouselApi type which is the second tuple element from useEmblaCarousel. If you already use shadcn's Carousel and have code that calls api.scrollTo(2) from a parent, the same code works in Drivn after you swap the imports. For the full Embla API surface, see the embla-carousel-react documentation.