Tailwind Stepper Component

Tailwind Stepper is a customizable React component designed to create intuitive step-by-step user interfaces using Tailwind CSS.

Installation

Install the package via npm or yarn or bun:

npm install tailwind-stepper

yarn add tailwind-stepper

bun add tailwind-stepper

Configuration

add the path for tailwind in the tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "...",
    "./node_modules/tailwind-stepper/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      "..."
    },
  },
  plugins: ["..."],
};

export default config;

Usage Example

Integrate the stepper component into your React application:

import React, { useState } from "react";
import { Stepper, Step } from "tailwind-stepper";

const steps: Step[] = [
  { step: 0, label: "Step 1", content: <div>Content for Step 1</div> },
  { step: 1, label: "Step 2", content: <div>Content for Step 2</div> },
  { step: 2, label: "Step 3", content: <div>Content for Step 3</div> },
  { step: 3, label: "Step 4", content: <div>Content for Step 4</div> },
];

const App = () => {
  const [selectedStep, setSelectedStep] = useState(0);

  return (
    <Stepper
      selectedStep={selectedStep}
      steps={steps}
      orientation="horizontal" // default
      hideLabel={false}
      classNames={{
        base: "...",
        divider: "...",
      }}
    />
  );
};

export default App;

Component Props

Stepper Component

Prop	Type	Description
selectedStep	number	The currently selected step.
steps	Step[]	Array of steps to display.
orientation	horizontal | vertical	Orientation of the stepper. Defaults to 'horizontal'.
hideLabel	boolean	Hides the labels of steps if true. Default is false.
classNames	Slots & { base?: string; divider?: string }	Custom class names for various components.

Step Object

Property	Type	Description
step	number	Step number.
label	string	Label for the step.
icon	React.ReactNode	Optional icon for the step.
content	React.ReactNode	Optional content displayed when step is selected.
onClick	() => void	Optional click handler for the step.

Customization

Tailwind Stepper allows extensive customization through the classNames prop. You can style various elements:

• wrapper: Wrapper around each step item.
• icon: Icon inside each step item.
• label: Label inside each step item.
• gradientBorder: Gradient border for the selected step item.
• base: Base class for the stepper container.
• divider: Class for dividers between steps.

Example with Custom Class Names

<Stepper
  selectedStep={selectedStep}
  steps={steps}
  orientation="vertical"
  hideLabel={false}
  classNames={{
    base: "...",
    wrapper: "...",
    icon: "...",
    label: "...",
    gradientBorder: "...",
    divider: "...",
  }}
/>

License

This project is licensed under the MIT License.