Carousel
A customizable carousel with microinteractions and slider.
Urban Dreams
Neon Nights
Desert Whispers
Installation
Run the following command
npx shadcn@latest add @aceternity/carouselProps
Carousel Component Props
| Prop | Type | Required | Description |
|---|---|---|---|
slides | SlideData[] | Yes | Array of slide objects containing title, button text, and image source |
SlideData Interface
| Property | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Title text for the slide |
button | string | Yes | Text to display on the slide's button |
src | string | Yes | Image source URL for the slide |
Slide Component Props
| Prop | Type | Required | Description |
|---|---|---|---|
slide | SlideData | Yes | Object containing the slide data |
index | number | Yes | Current index of the slide |
current | number | Yes | Index of the currently active slide |
handleSlideClick | (index: number) => void | Yes | Function to handle slide click events |
CarouselControl Component Props
| Prop | Type | Required | Description |
|---|---|---|---|
type | string | Yes | Type of control ("previous" or "next") |
title | string | Yes | Accessibility title for the control button |
handleClick | () => void | Yes | Function 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
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
