Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel examples · Standard

Hero Carousel for React

A hero carousel whose slides show a headline, a line of copy and a call-to-action button over a gradient.

Framework
UI library

Homepage heroes, promotional banners, feature announcements: sometimes each slide carries a message, not just a picture. This React carousel lays a headline, a line of copy and a button over each slide, on a gradient that keeps the text readable, with previous and next inside the frame. Use it for a landing page or a few campaigns that share the top of the page.

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

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.

All 4 carousel examples