Installation
Run the following command
npx shadcn@latest add @aceternity/carousel
Props
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
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

