> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Carousel

> Carousel component with dots, lines, and arrows variants

export const CarouselArrowsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CarouselArrows" frameBorder="0" width="100%" height="260"></iframe>;

export const CarouselLinesPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CarouselLines" frameBorder="0" width="100%" height="260"></iframe>;

export const CarouselDotsPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/CarouselDots" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Carousel component provides navigation controls for carousels with support for dots, lines, and arrows variants.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Carousel } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CarouselDots() {
      const [currentIndex, setCurrentIndex] = useState(0);
      const totalItems = 5;

      return (
        <Carousel
          variant="dots"
          totalItems={totalItems}
          currentIndex={currentIndex}
          onItemClick={setCurrentIndex}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CarouselDotsPreview />
  </Tab>
</Tabs>

## Variants

### Dots

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Carousel } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CarouselDots() {
      const [currentIndex, setCurrentIndex] = useState(0);
      const totalItems = 5;

      return (
        <Carousel
          variant="dots"
          totalItems={totalItems}
          currentIndex={currentIndex}
          onItemClick={setCurrentIndex}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CarouselDotsPreview />
  </Tab>
</Tabs>

### Lines

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Carousel } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CarouselLines() {
      const [currentIndex, setCurrentIndex] = useState(0);
      const totalItems = 5;

      return (
        <Carousel
          variant="lines"
          totalItems={totalItems}
          currentIndex={currentIndex}
          onItemClick={setCurrentIndex}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CarouselLinesPreview />
  </Tab>
</Tabs>

### Arrows

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Carousel } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function CarouselArrows() {
      const [currentIndex, setCurrentIndex] = useState(0);
      const totalItems = 5;

      const handlePrevious = () => {
        setCurrentIndex((prev) => Math.max(0, prev - 1));
      };

      const handleNext = () => {
        setCurrentIndex((prev) => Math.min(totalItems - 1, prev + 1));
      };

      return (
        <Carousel
          variant="arrows"
          totalItems={totalItems}
          currentIndex={currentIndex}
          onItemClick={setCurrentIndex}
          onPrevious={handlePrevious}
          onNext={handleNext}
          previousDisabled={currentIndex === 0}
          nextDisabled={currentIndex === totalItems - 1}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <CarouselArrowsPreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop         | Type                            | Default   | Description             |
  | :----------- | :------------------------------ | :-------- | :---------------------- |
  | variant      | `"dots" \| "lines" \| "arrows"` | -         | Carousel variant        |
  | totalItems   | `number`                        | -         | Total number of items   |
  | currentIndex | `number`                        | -         | Current active index    |
  | onItemClick  | `(index: number) => void`       | -         | Item click handler      |
  | onPrevious   | `() => void`                    | -         | Previous button handler |
  | onNext       | `() => void`                    | -         | Next button handler     |
  | disabled     | `boolean`                       | `false`   | Disabled state          |
  | size         | `"small" \| "large"`            | `"small"` | Carousel size           |
  | className    | `string`                        | -         | Additional CSS classes  |
</PropsTable>