Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Standard Carousel for React

Five slides numbered 1 through 5, one in the frame at a time, with previous and next buttons beside the frame.

One wide frame shows a single number, from 1 through 5, one slide at a time. Previous and next sit beside the frame.

Start here for images or quotes that share one slot. A Scroll Area fits if people should skim them in a strip. Base UI in React does not advance the slides on a timer.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Carousel anatomy: content, item, previous, next, indicator group

Usage

<div className="mx-auto w-full max-w-xl">
  <Carousel>
    <CarouselContent>
      {slides.map((slide) => (
        <CarouselItem key={slide}>
          <div className="flex aspect-video w-full items-center justify-center rounded-md border bg-background">
            <span className="font-semibold text-4xl">{slide}</span>
          </div>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</div>

FAQ

What is on each slide?

Five slides, one CarouselItem each. Each holds a div with aspect-video, w-full, rounded-md border and bg-background, and the slide number in font-semibold text-4xl. The wrapper is mx-auto w-full max-w-xl.

Why does one slide fill the frame?

One slide per page is the default. CarouselItem is basis-full, and the component puts ps-4 on each item for the gap.

Where are previous and next?

Beside the frame, outside it. Their names are Previous slide and Next slide, and each one is disabled when there is no slide further that way.

How do I show more than one slide?

Give CarouselItem a width class such as basis-1/2, and pass opts with align set to start.

How do I go back to the first slide after the last?

Pass opts with loop set to true.

Next on the last slide then shows the first, and neither button is ever disabled.

What does the markup need?

CarouselContent with the items, then CarouselPrevious and CarouselNext, all inside Carousel.

API Reference

No extra props in this demo. The rest is on the Carousel page.

All 4 carousel examples