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.

Pagination dots are the most common Carousel addition after the prev/next arrows, and they are the surface where Drivn and shadcn diverge most. shadcn does not ship a Dots component — you implement it yourself by reading api.scrollSnapList() for the snap count, tracking api.selectedScrollSnap() on the select event, and wiring api.scrollTo(index) per dot. That is ten to fifteen lines of boilerplate plus a useState and a useEffect you copy into every project.

Drivn ships Carousel.Dots with all of that pre-wired. The component reads the snap list from context, marks the active dot via selectedIndex === i, and calls api.scrollTo(i) on click. You drop one tag inside the carousel and it renders a row of clickable dots underneath the slides. The styling tokens — bg-border for inactive, bg-foreground for active — sit in the styles.dots object inside the Carousel source for easy theming.

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.