Shadcn Carousel

Q: What library does shadcn Carousel use?

Embla Carousel (`embla-carousel-react`). It is the most widely adopted React carousel library, used by Vercel's own design system and Radix UI examples. It provides touch-first scroll snapping, a clean plugin API, and weighs under 6 kB gzipped.

Q: How does autoplay work?

Install `embla-carousel-autoplay` and pass it to the plugins prop of useEmblaCarousel. Configure delay (default 4000ms), stopOnInteraction (pause on user touch/click), and stopOnMouseEnter (pause on hover). The plugin respects prefers-reduced-`motion` by not advancing slides when the media query matches.

Browse 11 production-ready shadcn carousel components using Embla Carousel. Covers single item, overlay thumbnail navigation, dots with content overlays, vertical orientation, multiple visible items, responsive basis, autoplay plugin, centered slide alignment, custom spacing, images with overlays, and thumbnail navigation.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Photo galleries and featured slides shown one at a time, moved by swipe, arrow buttons or a timer
Rows or columns of cards with several in view, sized per breakpoint or peeking at the next one
Media viewers where a thumbnail strip or a row of dots tracks the current slide and jumps to any one

When not to use

A rotating set of customer testimonials with star ratings and avatars: use the Review blocks
A shop page pairing a photo gallery with a buy box and size and color pickers: use the Product Detail blocks
A storefront section of shop collections with hover browse buttons: use the Category Card blocks

Agent notes

Every slide is a picsum.photos placeholder built with Array.from; map your own images and alt text from a real array
Where CarouselPrevious and CarouselNext are placed, they sit 3rem outside the slides at either end, so leave room or move them through className
Carousel reacts only to ArrowLeft and ArrowRight, vertical ones included, and only while focus sits on a control inside it

Third-party API docs

Embla Carousel v8: API reference, docs
Embla Carousel Autoplay v8: API reference, docs, used by 1 of 11 examples

Markdownhttps://reui.io/components/carousel.md

MCPget_component("carousel")

Installnpx shadcn@latest add carousel

Full index for agents:llms.txtReUI MCP setup

Shadcn Carousel: Embla-Powered Slides and Galleries

Shadcn Carousel is built on Embla Carousel: the most widely used React carousel library: wrapped in shadcn-compatible primitives. Embla handles touch, pointer, and keyboard scroll snapping, slide transitions, and plugin architecture without prescribing visual styles.

11 components cover basic single-item carousel, overlay thumbnail navigation, dots navigation with content overlays, vertical orientation, multiple visible items, responsive slide basis, autoplay with the embla-carousel-autoplay plugin, centered slide alignment, custom inter-slide spacing, images with overlays, and thumbnail strip navigation.

The sections below cover the Embla foundation, real use cases in product and marketing pages, feature details, and composition guidance.

What is Shadcn Carousel?

Shadcn Carousel wraps Embla Carousel with shadcn-compatible markup and Tailwind styling. Embla Carousel provides the scroll-snapping engine: it tracks pointer and touch velocity, snaps to the nearest slide on release, handles loop mode, and exposes a plugin API for autoplay, lazy loading, and class names.

ReUI components show the Carousel in realistic contexts: product image galleries with thumbnail strips, marketing hero slideshows with dots navigation, vertical feature carousels, and responsive grids that show 1, 2, or 3 slides depending on container width.

Why Use Shadcn Carousel?

Image galleries, product photo viewers, testimonial sliders, feature showcases, and media players all need a touch-friendly, keyboard-accessible slide container. Embla Carousel is the de facto standard for React carousels in 2024 to 2025: it is lightweight (6 kB gzipped), framework-agnostic at the core, and supports CSS-native scroll behavior.

The autoplay plugin (embla-carousel-autoplay) handles play/pause on hover and focus, respects reduced-motion preferences, and integrates with the Embla event system. Pair with Shadcn Aspect Ratio to keep slide images consistent across different screen sizes.

Libraries and ReUI Carousel Primitives

ReUI Carousel imports embla-carousel-react for the core carousel engine and embla-carousel-autoplay for the optional autoplay plugin. It composes shadcn Card for slide containers and Button for Previous and Next navigation arrows.

The thumbnail navigation component renders a secondary mini-carousel below the main one: clicking a thumbnail scrolls the main carousel to the corresponding slide. Both carousels share the same Embla API via useEmblaCarousel.

Shadcn Carousel Features

Embla Carousel Engine. Powered by Embla Carousel: the scroll-snapping library used by Vercel, Radix, and thousands of production React apps. Touch, pointer, and keyboard interactions with physics-based velocity snapping.
Autoplay Plugin. embla-carousel-autoplay plugin adds configurable autoplay with delay, play/pause on hover and focus, stop-on-interaction, and loop mode. Respects prefers-reduced-motion by pausing on reduced-motion media query.
Thumbnail Navigation. Thumbnail strip component renders a synchronized mini-carousel below the main one. Clicking a thumbnail scrolls the main carousel. Both carousels use useEmblaCarousel and share scroll state via the Embla API.
Dots Navigation with Overlays. Dots navigation component renders indicator dots that snap position with the active slide. Content overlays sit inside the slide for text, badge, or CTA placement on top of images.
Vertical Orientation. Vertical carousel scrolls slides top to bottom. Useful for mobile-first feature lists, vertical story viewers, and stacked card animations.
Multiple Visible Items. Multi-item carousel shows 2 to 4 slides simultaneously with gap spacing. Slide basis adapts to the number of visible items. Responsive basis variant changes the visible count at different container widths.
Centered Slide Alignment. Centered alignment mode snaps to the slide center rather than the start edge. Used for carousels where partial peek of adjacent slides on both sides is the intended visual treatment.
Keyboard and Touch Accessible. Keyboard users navigate between slides with arrow keys. Touch users swipe with native velocity snapping. Previous and Next buttons are shadcn Buttons with accessible labels.

Wrap carousel slides in Shadcn Aspect Ratio to enforce consistent image proportions across different slide content sizes. Use Shadcn Card as the slide container for testimonials, product cards, and content slides.

Pair with Shadcn Badge for slide labels and category chips overlaid on images, and Shadcn Button for Previous, Next, and CTA actions inside slides.

Use Shadcn Skeleton while carousel images load to prevent layout shift on initial render. For static image galleries without slide interaction, consider Shadcn Aspect Ratio in a CSS grid layout instead.

Product Detail Blocks in ReUI Pro

The free examples above pair with 6 production ready product detail blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Product Detail (6 blocks)Product detail pages with image galleries, specifications, and purchase options.

Browse all eCommerce blocks

Frequently Asked Questions

What library does shadcn Carousel use?

Embla Carousel (embla-carousel-react). It is the most widely adopted React carousel library, used by Vercel's own design system and Radix UI examples. It provides touch-first scroll snapping, a clean plugin API, and weighs under 6 kB gzipped.

How does autoplay work?

Install embla-carousel-autoplay and pass it to the plugins prop of useEmblaCarousel. Configure delay (default 4000ms), stopOnInteraction (pause on user touch/click), and stopOnMouseEnter (pause on hover). The plugin respects prefers-reduced-motion by not advancing slides when the media query matches.

Can I show multiple slides at once?

Yes. Set flex-basis on each slide element to control how many are visible: basis-1/2 shows 2, basis-1/3 shows 3. Use gap utilities for spacing between slides. The responsive basis component changes basis at different breakpoints to show 1 on mobile and 3 on desktop.

How does thumbnail navigation work?

Create two useEmblaCarousel instances: one for the main carousel, one for the thumbnail strip. Use the Embla scrollTo API to synchronize them: clicking a thumbnail calls mainEmbla.scrollTo(index); main scroll events update the active thumbnail via onSelect.

Does the carousel work on touch screens?

Yes. Embla Carousel uses pointer events to handle touch, stylus, and mouse drag natively. It calculates release velocity and snaps to the nearest slide using physics-based momentum: no CSS scroll-snap is needed.

How do I make the carousel accessible for keyboard users?

Previous and Next buttons are shadcn Buttons with descriptive aria-labels. The slide container receives tabIndex={0} for keyboard focus. Arrow key navigation between slides fires the Embla scroll API. ReUI components include all of these attributes.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.