Skip to content

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

Free

Hero Carousel for Vue

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.

UI library: Ark UI

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 Vue, Ark UI does not play the slides on its own.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="mx-auto w-full max-w-2xl">
  <Carousel :slideCount="slides.length">
    <CarouselContent>
      <CarouselItem v-for="(slide, index) in slides" :index="index" :key="slide.title">
        <div class="relative aspect-video overflow-hidden rounded-lg bg-muted">
          <div class="absolute inset-0 bg-linear-to-t from-foreground/60 to-transparent">
          </div>
          <div class="absolute inset-0 flex flex-col items-center justify-center p-8 text-center text-background">
            <h2 class="mb-2 font-bold text-3xl">{{ slide.title }}</h2>
            <p class="mb-6 max-w-md text-sm opacity-90">{{ slide.description }}</p>
            <Button variant="secondary">{{ slide.cta }}</Button>
          </div>
        </div>
      </CarouselItem>
    </CarouselContent>
    <CarouselControl>
      <CarouselPrevious class="data-[orientation=horizontal]:inset-s-4" />
      <CarouselNext class="data-[orientation=horizontal]:inset-e-4" />
    </CarouselControl>
  </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 data-[orientation=horizontal]:inset-s-4 and CarouselNext gets data-[orientation=horizontal]:inset-e-4, the same variant the component uses for its outside positions, so they replace them.

Can the slides advance on their own?

Yes: pass autoplay, or autoplay with a delay, and add CarouselAutoplayTrigger so people can pause it.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

Sets slideCount="slides.length", v-for="(slide, index) in slides", index="index" and key="slide.title". The rest is on the Carousel page.

Button

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

All 4 carousel examples