Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel examples · Standard

Standard Carousel for React

A basic carousel of five numbered slides with previous and next buttons.

Framework
UI library

Image galleries, product showcases, testimonials: a carousel shows several items in the space of one. This one is the basics in React with Base UI: five slides you can swipe or drag, a previous and a next button beside the frame, and arrow keys while it has focus. Start here and put your own content in each slide.

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

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.

All 4 carousel examples