Tailwind-stepper NPM

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: "...",
  }}
/>