Shadcn Carousel
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.
Basic carousel with single item
Vertical carousel orientation
Carousel with multiple items visible
Carousel with responsive basis
Carousel with autoplay plugin
Carousel with centered slide alignment
Carousel with custom spacing
Carousel with images and overlays
Carousel with thumbnail navigation
Carousel with overlay thumbnail navigation
Carousel with dots navigation and content overlays
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.
Eleven 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–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–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.
Integrating With Other Components
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.