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:

npm install sleekstepper

or

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.

Usage

1. Basic Setup

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

   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

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:

<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.

<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.