sleekstepper/README.md

A stylish and customizable stepper component for React, styled with **Tailwind CSS**. This component allows you to visually track steps in a process, such as order tracking or multi-step forms, with sleek progress indicators and themeable customization.

# SleekStepper

A stylish and customizable stepper component for React, styled with **Tailwind CSS**. This component allows you to visually track steps in a process, such as order tracking or multi-step forms, with sleek progress indicators and themeable customization.

## Features

- **Tailwind CSS Styling:** Fully styled with Tailwind CSS for easy and responsive customization.
- **Customizable Steps:** Provide an array of steps to track, with each step dynamically rendered.
- **Dynamic Step Color:** Change the color of each step's circle and progress line based on the current step.
- **Customizable Theme:** Supports a `theme` prop to define the color of the stepper's elements (e.g., step circles, progress lines).
- **Responsive and Flexible:** Works well on different screen sizes and layouts.
- **Simple Integration:** Easy to integrate into any React project with minimal setup.

## Installation

To install the `SleekStepper` component, run the following command in your React project:

```bash
npm install sleekstepper
```

or

```bash
yarn add sleekstepper
```

Make sure you have **Tailwind CSS** set up in your project. If you haven't set it up yet, follow the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).

## Usage

1. **Basic Setup**

   Import the `SleekStepper` component into your React component and pass the required props:

   ```jsx
   import React, { useState } from "react";
   import SleekStepper from "sleek-stepper";  // Adjust the import path if needed

   const MultiStepForm = () => {
     const [currStep, setCurrStep] = useState(0);

     const steps = ['Step 1: Info', 'Step 2: Address', 'Step 3: Review'];

     return (
       <div>
         <SleekStepper
           steps={steps}
           currStep={currStep}
           className="mb-4"
           theme="bg-blue-500" // Tailwind color for the theme
         />
         <button onClick={() => setCurrStep(currStep + 1)}>Next Step</button>
       </div>
     );
   };

   export default MultiStepForm;
   ```

2. **Customization Options**

   The `SleekStepper` component allows the following props for customization:

   - `steps`: **Array** – An array of strings representing each step.
   - `currStep`: **Number** – The current active step (0-based index).
   - `className`: **String** – Optional. Additional CSS classes for custom styling.
   - `theme`: **String** – Optional. Customizes the color of the stepper's elements (circle and line). Pass a Tailwind color class like `bg-blue-500`, `bg-green-500`, etc.

## Props

- `steps`: **Array** (Required) – An array of strings representing the labels for each step in the process.
- `currStep`: **Number** (Required) – The current active step (0-based index).
- `className`: **String** (Optional) – Additional CSS class to customize the layout and styling of the stepper container.
- `theme`: **String** (Optional) – A color theme for the stepper's step circles and progress lines. Pass a Tailwind class for the color (e.g., `bg-blue-500`, `bg-green-500`).

## Example

```jsx
import React, { useState } from "react";
import SleekStepper from "sleek-stepper"; // Adjust path if necessary

const OrderTracking = () => {
  const [currStep, setCurrStep] = useState(0);

  const steps = ['Order Received', 'Processing', 'Shipped', 'Delivered'];

  return (
    <div className="max-w-lg mx-auto">
      <SleekStepper
        steps={steps}
        currStep={currStep}
        className="my-4"
        theme="bg-green-500"
      />
      <button onClick={() => setCurrStep(currStep + 1)}>Next Step</button>
    </div>
  );
};

export default OrderTracking;
```

## Customizing the Stepper

You can customize the color theme of the stepper by passing a `theme` prop with Tailwind CSS classes, like so:

```jsx
<SleekStepper
  steps={['Step 1', 'Step 2', 'Step 3']}
  currStep={currStep}
  onStepChange={setCurrStep}
  theme="bg-indigo-500"  // Customize with any Tailwind color class
  className="my-4"
/>
```

### Custom Styling
You can also use the `className` prop to apply additional Tailwind classes to customize the layout or appearance further.

```jsx
<SleekStepper
  steps={steps}
  currStep={currStep}
  onStepChange={setCurrStep}
  theme="bg-blue-600"
  className="mb-6 border p-4"
/>
```

## Accessibility

The `SleekStepper` component is designed with accessibility in mind. Users can navigate through the steps with keyboard navigation, making it easy to interact with the stepper via the "Tab" and "Enter" keys.

## License

This package is open-source and available under the [MIT License](LICENSE).