Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Carousel

A customizable carousel with microinteractions and slider.

Open in
  • Mystic Mountains

    Mystic Mountains

  • Urban Dreams
  • Neon Nights
  • Desert Whispers

Installation

Run the following command

npx shadcn@latest add @aceternity/carousel

Props

PropTypeRequiredDescription
slidesSlideData[]YesArray of slide objects containing title, button text, and image source

SlideData Interface

PropertyTypeRequiredDescription
titlestringYesTitle text for the slide
buttonstringYesText to display on the slide's button
srcstringYesImage source URL for the slide

Slide Component Props

PropTypeRequiredDescription
slideSlideDataYesObject containing the slide data
indexnumberYesCurrent index of the slide
currentnumberYesIndex of the currently active slide
handleSlideClick(index: number) => voidYesFunction to handle slide click events

CarouselControl Component Props

PropTypeRequiredDescription
typestringYesType of control ("previous" or "next")
titlestringYesAccessibility title for the control button
handleClick() => voidYesFunction to handle control click events

Build websites faster and 10x better than your competitors with

Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji