Carousel

A flexible and easy-to-use carousel with customizable navigation and indicators.

Examples

Carousel basic

Weekly planning12 tasks

Launch checklist8 tasks

Design review5 tasks

Quarterly report1 task

Carousel with custom sizes

We use basis-1/3 to set the width of each carousel item to one-third of the container.

Mon123 meetings

Tue131 meeting

Wed144 meetings

Thu152 meetings

Fri161 meeting

Sat17Free

Sun18Free

Carousel with custom sizes and spacing

We use -ml-4 on CarouselContent and pl-4 on CarouselItem to add spacing between carousel items.

Mon123 meetings

Tue131 meeting

Wed144 meetings

Thu152 meetings

Fri161 meeting

Sat17Free

Sun18Free

Carousel with custom indicators

We can use index and onIndexChange to create custom indicators for the carousel.

Step 1 of 4Connect your calendarTwo minutes

Step 2 of 4Invite your teamUp to 10 members on the free plan

Step 3 of 4Create a first boardStart from a template

Step 4 of 4Share the weekly viewRead only for guests

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-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	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.