Carousel
A flexible and easy-to-use carousel with customizable navigation and indicators.
Examples
Carousel basic
1
2
3
4
Carousel with custom sizes
We use basis-1/3 to set the width of each carousel item to one-third of the container.
1
2
3
4
5
6
7
Carousel with custom sizes and spacing
We use -ml-4 on CarouselContent and pl-4 on CarouselItem to add spacing between carousel items.
1
2
3
4
5
6
7
Carousel with custom indicators
We can use index and onIndexChange to create custom indicators for the carousel.
1
2
3
4
Installation
npx shadcn add "https://motion-primitives.com/c/carousel.json"Component API
Carousel
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The content elements of the carousel. | |
className | string | Optional CSS class for styling the carousel container. | |
initialIndex | number | 0 | Initial index of the active carousel item. |
index | number | Controlled index of the active carousel item. | |
onIndexChange | (newIndex: number) => void | Callback function when the active index changes. | |
disableDrag | boolean | false | Whether dragging is disabled. |
CarouselNavigation
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | Optional CSS class for styling the navigation container. | |
classNameButton | string | Optional CSS class for styling the navigation buttons. | |
alwaysShow | boolean | false | Whether navigation buttons are always visible. |
CarouselIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | Optional CSS class for styling the indicator container. | |
classNameButton | string | Optional CSS class for styling the indicator buttons. |
CarouselContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The sliding elements or items of the carousel. | |
className | string | Optional CSS class for additional styling. | |
transition | Transition | Optional motion transition for animating slides. |
CarouselItem
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The individual content item within the carousel. | |
className | string | Optional CSS class for styling the carousel item. |
useCarousel
| Return | Type | Description |
|---|---|---|
index | number | The current index of the active carousel item. |
setIndex | (newIndex: number) => void | Function to update the index to show a different carousel item. |
itemsCount | number | Total number of items in the carousel. |
setItemsCount | (newItemsCount: number) => void | Function to set the number of items in the carousel. |
This hook provides context values related to the carousel's state, allowing components within the carousel to adjust based on the active item and total items.