Question 1

What is a shadcn carousel?

Accepted Answer

A shadcn carousel is a swipeable, keyboard-navigable slide container for showcasing image galleries, product showcases, testimonials, hero rotations, or any sequence of related content. It's built on Embla Carousel (the de-facto React carousel primitive — touch gestures, momentum, snap points, plugin ecosystem) wrapped by shadcn/ui's Carousel component, and styled with Tailwind CSS. Each example in this gallery is a single self-contained TSX file — copy, paste, and ship.

Question 2

Are these carousel examples free?

Accepted Answer

Yes. Every carousel example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

Why Embla and not Swiper or Slick?

Accepted Answer

Embla is smaller (no external CSS), framework-agnostic at the core (works equally well in React, Vue, vanilla), tree-shakeable (you import only the plugins you need), and has explicit TypeScript support. Swiper is heavier with more built-in features (thumbnails, navigation, fade); Slick is older and jQuery-rooted. For shadcn/ui's principle of small composable primitives, Embla fits the model — bring plugins (autoplay, fade, classnames) only when you need them.

Question 4

When should I use a carousel versus a grid, scroll-snap row, or tabs?

Accepted Answer

Carousel for sequential browsing where one or two items dominate the viewport (hero rotations, product galleries with large images, testimonials). Grid for parallel scanning where users compare items side-by-side. Scroll-snap row for dense horizontal scrolling without arrows (mobile category strips). Tabs for switching between distinct content panels (one visible at a time, no sequential implication). Pick by intent: carousels imply order, grids imply parallel comparison.

Question 5

How do I add prev/next navigation buttons?

Accepted Answer

The shadcn Carousel ships CarouselPrevious and CarouselNext as separate components. Place them inside the Carousel root and they auto-wire to the embla API for navigation, with disabled state at the ends. Position them absolutely (`absolute -left-12 top-1/2`) for outside-the-frame controls, or inline (`flex justify-end gap-2`) for inside-the-frame controls. The shadcn component handles ARIA semantics + keyboard for you.

Question 6

How do I add thumbnail navigation?

Accepted Answer

Render a second Carousel below the main one with smaller slides for thumbnails. Use `useEmblaCarousel`'s `selectedScrollSnap` to track the current slide and `scrollTo(index)` to jump. Each thumbnail is a button that calls `mainApi.scrollTo(index)`. Optionally call `thumbApi.scrollTo(currentIndex)` from a `select` event listener so the active thumbnail stays visible. Pattern reference: Embla's official thumbnail example wires this in ~30 lines.

Question 7

How do I autoplay slides?

Accepted Answer

Add the `embla-carousel-autoplay` plugin to the Carousel: `plugins={[Autoplay({ delay: 3000, stopOnInteraction: true })]}`. `stopOnInteraction: true` pauses autoplay when the user manually navigates — important for accessibility (continuous motion is hostile to users with vestibular sensitivities). Always provide manual prev/next controls alongside autoplay so users can override.

Question 8

How do I make the carousel loop infinitely?

Accepted Answer

Pass `opts={{ loop: true }}` to the Carousel. Embla seamlessly wraps from the last slide back to the first (and vice versa) without a visible jump. Loop mode works best with at least 3 slides — with 2, the wrap-around feels jarring because the same two slides oscillate. Avoid loop for content where order matters (step-by-step tutorials, paginated articles).

Question 9

How do I install a carousel example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/carousel/…`, plus the shadcn/ui Carousel primitive (and its embla-carousel-react dependency) if you don't already have them. Replace the placeholder slides with your own content.

Question 10

How do I make slides responsive (1 per view on mobile, 3 on desktop)?

Accepted Answer

Set `basis-` classes on each CarouselItem: `<CarouselItem className="basis-full md:basis-1/2 lg:basis-1/3">`. Embla respects the rendered width per slide. Combine with `opts={{ slidesToScroll: 1 }}` so users always advance one slide at a time regardless of how many are visible. For varied slide widths (a hero + smaller cards), pass `slideSpacing: "1rem"` or use individual `basis-` per slide.

Question 11

How do I detect which slide is currently visible (for analytics, lazy-loading)?

Accepted Answer

Capture the embla API via `setApi` callback, then listen for the `select` event: `api.on("select", () => setCurrentIndex(api.selectedScrollSnap()))`. Use `currentIndex` to lazy-load the next slide's image, fire an analytics event, or update an external indicator (page dots, slide counter "3 of 7"). Avoid heavy work inside the listener — it fires on every snap.

Question 12

How do I add page indicator dots?

Accepted Answer

Use the API's `scrollSnapList()` to get the count, and render that many dots. The active dot is determined by `selectedScrollSnap()`. Each dot is a button that calls `api.scrollTo(index)` for direct navigation. Style the active dot with `bg-foreground` and inactive with `bg-muted-foreground/30`. Keep dot tap targets at least 44×44 px (use a transparent button wrapper around the visual dot).

Question 13

Which libraries do carousel examples depend on?

Accepted Answer

Embla Carousel React (the carousel primitive — gestures, momentum, snap), shadcn/ui Carousel (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling), and Lucide React (chevrons for prev/next). Optional plugins: embla-carousel-autoplay, embla-carousel-fade, embla-carousel-class-names. TypeScript is assumed. React 19 is the baseline.

Question 14

Are carousel examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The shadcn Carousel sets `role="region"` and `aria-roledescription="carousel"` on the root, and arrow keys move between slides when the carousel is focused. CarouselPrevious / CarouselNext render as real `<button>` elements with `aria-label` and disabled state. For autoplay carousels, add a play/pause toggle so users can stop motion (WCAG 2.2 SC 2.2.2 — Pause, Stop, Hide).

Question 15

Can I use these carousel examples with React Server Components?

Accepted Answer

The Carousel primitive is a client component (Embla manages drag state, snap calculations, viewport observers). Wrap it in a Server Component parent and pass slide data (image URLs, captions, product info) as props. The slides themselves can be Server Components — only the Carousel root needs the client boundary. For SEO-critical content, render the slides server-side so crawlers see them even before JS hydrates.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The `basis-*` and `flex` utilities used for slide widths exist identically across versions.

React Carousel Examples for shadcn/ui

Browse every carousel example

Frequently Asked Questions