Skip to content

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

Free

Hero Carousel for React

Three hero slides with a headline, a line of copy and a button over a gradient. The first is Build faster with ready-made components, and Get Started.

Each slide lays a headline, a short line and a button over a dark gradient. The first reads Build faster with ready-made components, with Get Started. Previous and next sit inside the frame.

Use a hero carousel when a few campaigns share the top of a page. A single Card is clearer if there is only one message. In React, Base UI does not play the slides on its own.

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-2xl">
  <Carousel>
    <CarouselContent>
      {slides.map((slide) => (
        <CarouselItem key={slide.title}>
          <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
            <div className="absolute inset-0 bg-linear-to-t from-foreground/60 to-transparent" />
            <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-center text-background">
              <h2 className="mb-2 font-bold text-3xl">{slide.title}</h2>
              <p className="mb-6 max-w-md text-sm opacity-90">
                {slide.description}
              </p>
              <Button variant="secondary">{slide.cta}</Button>
            </div>
          </div>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious className="start-4" />
    <CarouselNext className="end-4" />
  </Carousel>
</div>

FAQ

When should I use a hero carousel instead of a single hero?

When you have two to four messages of equal weight, such as a launch, a sale and a new feature. People rarely wait for later slides, so put the most important message first. With one clear goal, a single static hero works better.

How do I add a background image?

Put an img with absolute inset-0 size-full object-cover first in the slide's box, before the gradient layer. The demo has no image: the fill is bg-muted under the gradient.

What is the gradient for?

It keeps the text readable on any background. The layer is bg-linear-to-t from-foreground/60 to-transparent, darkest at the bottom, and the text is text-background, so both swap in dark mode. Change the direction (bg-linear-to-b) or the strength (from-foreground/80) to suit your images.

How are previous and next placed inside the slide?

CarouselPrevious gets start-4 and CarouselNext gets end-4, which replace the component's outside positions.

Can the slides advance on their own?

Yes, with the autoplay plugin in plugins.

Moving content must have a way to pause it, and a delay of 5 seconds or more leaves time to read the slide.

Is the text accessible?

Each title is an h2, so keep it below the page's h1. Check the contrast of the text against your images. Make the button labels specific (See the summer plans, not just Learn More) when several slides share a page.

API Reference

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

Button

Sets variant="secondary". The rest is on the Button page.

All 4 carousel examples