Question 1

What is the Carousel?

Accepted Answer

shadcn.io's Carousel shows a row of slides one page at a time, with swipe and drag, previous and next buttons, and arrow keys. Use it for image galleries, product shelves, testimonials or hero banners. Each example in this gallery is one small file built from CarouselContent, CarouselItem, CarouselPrevious and CarouselNext.

Question 2

Are these carousel examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is this different from a scroll-snap row?

Accepted Answer

A scroll-snap row is just CSS: no buttons, no current slide and nothing to read or set the position. The Carousel adds previous and next buttons that disable at the ends, keyboard support, a current page you can read and set, looping and autoplay.

Question 4

When should I use a carousel instead of a grid or tabs?

Accepted Answer

A carousel for a short sequence where one or two items should hold the attention, such as a hero or a photo gallery. A grid when people compare items side by side. Tabs for distinct panels that aren't a sequence.

Question 5

How do I add thumbnail navigation?

Accepted Answer

Render one button per slide under the carousel, read the current slide to highlight its button, and set the slide when a button is pressed. The carousel with thumbnails shows the pattern with numbered buttons; put a small image in each for picture thumbnails.

Question 6

How do I put the previous and next buttons inside the slide?

Accepted Answer

Override their position with classes on CarouselPrevious and CarouselNext, as the hero carousel does, so they sit a few pixels in from each edge instead of outside the frame.

Question 7

How do I make the slides advance on their own?

Accepted Answer

Turn on autoplay with a delay, and always give people a way to pause it: moving content must be stoppable. The Carousel component page shows autoplay on every library.

Question 8

How do I loop back to the first slide?

Accepted Answer

Turn on looping: next on the last slide then shows the first, and neither button is ever disabled. Use at least three slides so the wrap doesn't feel like flipping back and forth.

Question 9

How do I install a carousel example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Carousel and the other components it uses if you don't have them yet.

Question 10

How do I show several slides at once?

Accepted Answer

Each library sets this its own way: a slides-per-page option on Ark UI, or a basis width class on each item on the other React libraries. Every example's code uses the right one for the page you're on.

Question 11

How do I know which slide is showing?

Accepted Answer

Read the carousel's current page and listen for its change, then use it for a counter like Slide 3 of 5, to load the next image or to highlight a thumbnail. The carousel with thumbnails does exactly this.

Question 12

How do I add dots under the slides?

Accepted Answer

Render one small button per slide that sets the slide when pressed and looks active for the current one. Keep each dot's tap target large enough, with a transparent area around the visible dot.

Question 13

What are carousel examples built on?

Accepted Answer

shadcn.io's Carousel plus the components each example uses, such as Button and Badge, styled with Tailwind CSS and Lucide icons. In React they run on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 14

Are carousel examples accessible?

Accepted Answer

Yes. The carousel is described as a carousel to screen readers, the previous and next buttons are named Previous slide and Next slide and disable at the ends, and the arrow keys move between slides. Give images a meaningful alt, and a pause control when slides move on their own.

Question 15

Do the examples work with server rendering?

Accepted Answer

Yes. The slides render on the server, so their content is in the page before any script runs, and the carousel becomes interactive in the browser.

Question 16

Which Tailwind CSS version do the examples use?

Accepted Answer

Tailwind CSS v4. The classes are standard utilities and theme tokens such as bg-muted and text-muted-foreground, read from your theme's CSS variables.

Carousel Examples

Carousel with Thumbnails

Hero Carousel

Product Showcase Carousel

Standard Carousel

More component examples

Chart

Data Table

Item

Kbd

Table

Avatar

Badge

Checkbox

Carousel examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every carousel example. One prompt away.