║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

export const metadata = { title: 'Carousel - Motion-Primitives', description: 'A flexible and easy-to-use carousel with customizable navigation and indicators. Built for React, Next.js, and Tailwind CSS.', };

import { CarouselBasic } from './carousel-basic'; import { CarouselCustomSizes } from './carousel-custom-sizes'; import { CarouselSpacing } from './carousel-spacing'; import { CarouselCustomIndicator } from './carousel-custom-indicator'; import ComponentCodePreview from '@/components/website/component-code-preview';

Carousel

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

Examples

Carousel basic

<ComponentCodePreview component={<CarouselBasic />} filePath='app/docs/carousel/carousel-basic.tsx' />

Carousel with custom sizes

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

<ComponentCodePreview component={<CarouselCustomSizes />} filePath='app/docs/carousel/carousel-custom-sizes.tsx' />

Carousel with custom sizes and spacing

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

<ComponentCodePreview component={<CarouselSpacing />} filePath='app/docs/carousel/carousel-spacing.tsx' />

Carousel with custom indicators

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

<ComponentCodePreview component={<CarouselCustomIndicator />} filePath='app/docs/carousel/carousel-custom-indicator.tsx' />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value='cli'>CLI</TabsTrigger> <TabsTrigger value='manual'>Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <InstallationCli value='carousel' /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath='components/core/carousel.tsx' />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║